YvYang's Blog

为网站添加并使用iconfont图标

这篇文章介绍了如何在hexo-theme-butterfly主题中添加并使用Iconfont图标库。作者首先说明了在默认的FontAwesome图标库中存在的问题,如需要付费以及有时找不到特定图标的需求,随后转向引入Iconfont作为补充。Iconfont是由阿里妈妈MUX开发的一个矢量图标管理、交流平台。文章详细指导了注册账号和获取图标代码的过程,包括如何访问官网、选择图标加入购物车、添加到项目、更新配置文件等步骤。最后,文章总结了使用Iconfont图标服务的优势,并鼓励读者尝试这个工具以丰富网站内容。

0.4千字 预计阅读 1 分钟 0 次浏览

前言

hexo-theme-butterfly主题中,网站默认使用Font Awesome作为图标库,其访问速度尚可、使用十分便捷,但是其中大量图标需要收费而且有时候也找不到想要的图标,所以我决定引入Iconfont图标库作为补充。
Iconfont是阿里妈妈MUX(阿里妈妈?算了官网就是这样写的)倾力打造的矢量图标管理、交流平台。
iconfont.png

功能实现

注册账号

前往Iconfont官网https://www.iconfont.cn注册并登录

获取图标代码

1.找到想要的图标后选择加入购物车
2.选好所有图标后打开购物车
iconfont2.png
3.选择添加至项目
4.点击添加项目(若已添加可跳过)
5.选择加入的项目
6.确定添加到项目
iconfont3.png
7.前往我的项目
8.更新并复制代码
9.将复制的代码添加到配置文件_config.butterfly.ymlhead标签处

YAML
inject:
  head:
    - <link rel="stylesheet" href="[复制的代码]">

注:每次添加新的图标都要更新代码

iconfont4.png
iconfont4.png

引用图标

使用iconfont <图标名>的格式引用图标
iconfont5.png

总结

Iconfont的图标服务引用起来并不繁琐,访问速度很快,图标库也很丰富。
希望这期教程能够帮到各位读者。

文章作者: 余漾

文章链接: https://blog.yvyang.top/posts/1202/index.HTML

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 YvYang's Blog

评论加载中…