【Hexo个人博客美化教程】如何在Butterfly主题中使用阿里巴巴iconfont矢量图标

背景

• 在hexo的主题butterfly的美化中，对社交图标的美化方式是只支持引入fontawesome的矢量图标

• 但是！Font Awesome对于国内网站的图标实在是寥寥无几

• 那么有没有办法可以引入阿里巴巴矢量图标库呢？它可以基本覆盖国内大部分网站的图标，以下就是如何使用阿里巴巴iconfont矢量图标的教程！
  

选择图标

iconfont图标库地址：iconfont-阿里巴巴矢量图标库

1. 找到自己需要的图标之后点击 添加入库

2. 将图标添加至项目中，如果没有项目的话需要新建项目
   

3. 来到这个页面，点击font class，生成代码并复制这个网址
   

4. 将复制的网址打开即可获得css文件
   

应用图标

新建css文件

• 在hexo的根目录下的source文件夹下css文件夹 font.css ，把复制的代码粘贴进去
  

引入css文件

• 在 _config.butterfly.yml 中引入css文件
  

注意：如果你没有创建config.butterfly.yml 文件，那就将css文件放在butterfly主题的source文件夹的css文件夹中，并在里面的config.yml中引入css文件

使用iconfont

在 _config.butterfly.yml 中找到social

按照iconfont 代码名: 网站地址的格式填写即可

代码名可以在这里复制

然后按照惯例hexo g ，hexo s就完成啦~