【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

【Hexo是什么？】Hexo 是一个快速、简洁且高效的博客框架。如果你想搭建属于自己的个人博客，那么Hexo框架是一个很不错的选择。Hexo的安装也相当简单，请自行百度。

【Butterfly是什么？】Butterfly是Hexo中的一个主题，也受到了很多博主的青睐，使用主题可以让自己的博客更加美观，下面放一张该主题下的主页图片。

在阅读了butterfly主题配置的官方文档之后，发现其对使用阿里图标库方法的描述存在一些不足，比如不能自定义图标的大小。下面说一下另一种方法：

1.注册iconfont，新建项目之后，将图标添加到自己的项目中

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

2.点击Font class中的链接，复制下来

3.在/source目录下新建文件夹 source/css，新建文件font.css，然后将刚刚复制的代码粘贴进去

4.在_config.butterfly.yml文件中找到inject，按如图所示设置

5.引用格式

至此图标已经可以正常显示，但是显示效果偏小

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

此时修改font.css文件里的font-size属性，默认是16px，我们改成22px，看一下效果

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

除此之外，在iconfont项目中可以点击编辑来调整图标的大小和位置，修改完保存即可

【个人博客】Butterfly主题配置——如何使用阿里矢量图标库

-> 加入科技玩家交流群组：点击加入注意:
1.文中二维码和链接可能带有邀请性质，请各位玩家自行抉择。
2.请勿通过链接填写qq号与密码、银行卡号与密码等个人隐私信息。
3.禁止纯拉人头，拉app注册等信息，发现必小黑屋。
4.同一种信息仅发一次，多发会被删除。
5.文章中源码或APP等，无法保证其绝对安全，需自行辨别。
6.文章关联方不想展示也可以微信站长“socutesheep”删除。

本文由 @Ra1nB0w 发布。如若转载，请注明出处：科技玩家 » 【个人博客】Butterfly主题配置——如何使用阿里矢量图标库