Hexo博客技巧:使用阿里iconfont图标
![](https://cdn.bili33.top/npm/aciano-cdn@1.0.13/post/Hexo博客技巧:使用阿里iconfont图标/封面.png)
Hexo博客技巧:使用阿里iconfont图标
Aciano前言
虽然Butterfly主题支持直接调用font-awesome v5图标,但是Font Awesome无论是v4还是v5支持的图标都太少了,关于国内平台的图标几乎是寥寥无几。
所以便想到可以使用阿里iconfont图标库,但官方文档中并没有介绍用法,于是只能自己来了。
具体过程
新建项目
进入阿里 iconfont 图标库,寻找你想要的图标,并且将鼠标悬停在图标上,点击购物车图标。如下图:
将你所有需要用到的图标添加入库后,点击网站右上角的购物车图标:
然后点击添加至项目:
然后你就会来到一下界面,选择Font class
模式,点击查看在线链接:
得到在线链接后粘贴到浏览器打开,可以得到一个css文件,里面有刚才添加的图标的样式,右键另存为到\themes\Butterfly\source\css\
文件夹:
引用文件
不同主题引入外部 css/js 的方法都不相同,请参考你所使用主题引入外部样式的设置,这里以Butterfly主题为例:
使用 iconfont
引入css文件后,配置主题文件_config.butterfly.yml
,
直接写阿里提供的样式即可:
1 | social: |
其中前面的
iconfont
为你的css文件名
如果觉得图标小,可以在css文件中更改:
1 | .iconfont { |
End
评论
匿名评论隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果