Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标
Hexo系列文章已经完成上传：
一、Hexo准备---Node.js、Vue
二、Hexo、主题、部署上线
三、Butterfly美化
四、Hexo之更换背景及透明度
五、Hexo-使用阿里iconfont图标
六、PicGo：搭建图床
七、Hexo-域名设置+收录
因为使用hexo搭建的博客中，大家并不懂都有什么图标，fa fa-xx就懵了，不知道都有什么。
首先，fa fa-xxx中的图标可以在 图标库 中寻找。
(上面慢的话，可以在这个：另一个图标库)
例如：
首页: / || fa fa-home
归档: /archives/ || fa fa-archive
标签: /tags/ || fa fa-tags
显而易见，就算能找到也有很多图标找不到，所以这个时候，我们可以选择使用阿里iconfont图标
建立项目
1.进入阿里 iconfont 寻找你想要添加的图标，并且添加到项目。
2.找到你想添加的图标，将你想要添加的图标点击 “添加入库” 按钮。
3.点击右上角小购物车图标，这里会看到你刚刚添加的所有图标
4.添加至项目
5.随便起个项目名字，项目创建成功如下：
6.生成在线链接
点击 Font class 按钮，点击查看在线链接，会生成在线链接
- 打开
链接，红线上的就是调用的名称。
引入字体样式
1.存入css
在页面中右键--另存为，存到\themes\butterfly\source\css\:
2.引入文件
使用图标
可以在\source\_data中的butterfly.yml修改social：
iconfont icon-rss: /atom.xml || RSS链接
当然图标你可以感觉会挺小的，可以在保存的css文件中自行修改：
.icon-xxx:before {
content: "\e600";
/* 修改颜色 */
color: blue;
/* 修改大小 */
font-size: 24px;
}
这样修改会导致所有这个图标的大小都会变动。建议的方式是重新写一个 css，为其添加规则。设置时只需要多加一个class 即可，例如：
.icon-xxx:before {
content: "\e600";
}
/* 卡片处小图标 */
.card_icon {
/* 修改颜色 */
color: blue;
/* 修改大小 */
font-size: 24px;
}
成果图：
