为网站添加并使用iconfont图标

发布于 2026年2月13日

前言

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

功能实现

注册账号

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

获取图标代码

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

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

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

引用图标

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

总结

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