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: http://aciano.top/redirect/?target=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