YvYang's Blog 
为网站添加并使用iconfont图标
329 字
2 分钟
为网站添加并使用iconfont图标
前言
在hexo-theme-butterfly主题中，网站默认使用Font Awesome作为图标库，其访问速度尚可、使用十分便捷，但是其中大量图标需要收费而且有时候也找不到想要的图标，所以我决定引入Iconfont图标库作为补充。 Iconfont是阿里妈妈MUX（阿里妈妈？算了官网就是这样写的）倾力打造的矢量图标管理、交流平台。
功能实现
注册账号
获取图标代码
1.找到想要的图标后选择加入购物车
2.选好所有图标后打开购物车
添加至项目
4.点击添加项目（若已添加可跳过）
5.选择加入的项目
6.确定添加到项目
_config.butterfly.yml中head标签处inject: head: - <link rel="stylesheet" href="[复制的代码]">注：每次添加新的图标都要更新代码
引用图标
使用iconfont <图标名>的格式引用图标
总结
Iconfont的图标服务引用起来并不繁琐，访问速度很快，图标库也很丰富。 希望这期教程能够帮到各位读者。
支持与分享
如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！
为网站添加并使用iconfont图标
https://blog.yvyang.top/posts/1202/index.HTML/ 相关文章 智能推荐
1
添加来访者卡片
建站札记 这篇文章介绍了在Hexo博客中使用小小API替代失效的Nice猫API来实现访客卡片功能的方法。文章首先说明了更换API的背景原因，随后详细讲解了创建welcome.js文件的步骤，包括IP数据获取、地址解析、缓存管理、欢迎消息生成等核心代码逻辑，并提供了完整的JavaScript代码示例。最后指导用户如何在主题配置文件中引入JS文件和配置卡片内容，使博客能够根据访客的地理位置和IP地址显示个性化的欢迎信息，提升网站交互体验。
2
网站域名从blog.yvyang.fun迁移至blog.yvyang.top
建站札记 这篇文章主要讲述了作者从`yvyang.fun`这个域名迁移至`yvyang.top`的过程，以及将`yvyang.fun`重定向到`yvyang.top`的操作。文章还提到了续费价格的变化，以及作者对读者的祝福。
3
使用CloudFlare代理WebDav播放音乐
建站札记 这篇文章介绍了使用 CloudFlare Worker 实现 WebDav 服务的方法。文章中首先创建了一个名为 Workers 的目录，并在其中创建了两个文件：HelloWorld.worker.ts 和 proxyWorker.ts。这两个文件分别用于编写 HelloWorld 和代理音乐请求的代码。文章还提供了一些辅助函数，如 isOriginAllowed、getTestPage 和 debugInfo，以方便开发者进行调试和测试。
4
网站加速方案：阿里云免费版边缘安全加速ESA
建站札记 这篇文章介绍了如何通过阿里云免费版边缘安全加速ESA服务为个人博客网站加速。作者首先描述了自己无法使用国内CDN服务的情况，然后发现了阿里云的ESA服务，并决定尝试开通该服务。在开通过程中，作者详细解释了如何在控制台添加站点、设置DNS解析记录以及申请证书的具体步骤。
5
Butterfly:为博客添加微软Clarity数据统计
建站札记 这篇文章介绍了如何为博客添加微软Clarity数据统计工具，通过Hexo框架和Butterfly主题进行演示。首先需要注册微软账号并登录Clarity官网，然后新建项目并将网站添加到项目中。接下来，在`_config.butterfly.yml`主题配置文件中复制粘贴代码，按照缩进格式填写，最后保存后等待效果显现。
随机文章 随机推荐
评论区
欢迎来到我的博客！这是一则示例公告。
音乐
暂未播放
0:00 0:00
19
2
33
17,397
0 天
0
0