Hexo博客技巧：使用阿里iconfont图标

前言

虽然Butterfly主题支持直接调用font-awesome v5图标，但是Font Awesome无论是v4还是v5支持的图标都太少了，关于国内平台的图标几乎是寥寥无几。

所以便想到可以使用阿里iconfont图标库，但官方文档中并没有介绍用法，于是只能自己来了。

具体过程

新建项目

进入阿里 iconfont 图标库，寻找你想要的图标，并且将鼠标悬停在图标上，点击购物车图标。如下图：

添加入库.png

将你所有需要用到的图标添加入库后，点击网站右上角的购物车图标：

点击购物车.png

然后点击添加至项目：添加至项目.png

然后你就会来到一下界面，选择Font class模式，点击查看在线链接：

生成代码.png

gif演示

得到在线链接后粘贴到浏览器打开，可以得到一个css文件，里面有刚才添加的图标的样式，右键另存为到\themes\Butterfly\source\css\文件夹：

查看代码.png

另存为路径.png

引用文件

不同主题引入外部 css/js 的方法都不相同，请参考你所使用主题引入外部样式的设置，这里以Butterfly主题为例：

引入css.png

使用 iconfont

引入css文件后，配置主题文件_config.butterfly.yml，

直接写阿里提供的样式即可：

1
2
social:
  iconfont  iconbilibili: https://www.bilibili.com

配置文件.png

其中前面的iconfont为你的css文件名

如果觉得图标小，可以在css文件中更改：

1
2
3
4
5
6
7
.iconfont {
  font-family: "iconfont" !important;
  font-size: 20px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

End