Hexo-使用阿里iconfont图标
Hexo-使用阿里iconfont图标
Hexo系列文章已经完成上传:
一、Hexo准备---Node.js、Vue
二、Hexo、主题、部署上线
三、Butterfly美化
四、Hexo之更换背景及透明度
五、Hexo-使用阿里iconfont图标
六、PicGo:搭建图床
七、Hexo-域名设置+收录
因为使用hexo
搭建的博客中,大家并不懂都有什么图标,fa fa-xx
就懵了,不知道都有什么。
首先,fa fa-xxx
中的图标
可以在 图标库 中寻找。
(上面慢的话,可以在这个:另一个图标库)
![1](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004005.png)
例如:
首页: / || fa fa-home
归档: /archives/ || fa fa-archive
标签: /tags/ || fa fa-tags
![2](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004037.png)
![3](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004059.png)
![4](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004103.png)
显而易见,就算能找到也有很多图标
找不到,所以这个时候,我们可以选择使用阿里iconfont图标
建立项目
1.进入阿里 iconfont 寻找你想要添加的图标,并且添加到项目
。
2.找到你想添加的图标,将你想要添加的图标点击 “添加入库”
按钮。
![5](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004114.png)
3.点击右上角小购物车图标
,这里会看到你刚刚添加的所有图标
![6](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004127.png)
4.添加至项目
![7](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004136.png)
5.随便起个项目名字
,项目创建成功
如下:
![8](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004143.png)
6.生成在线链接
点击 Font class
按钮,点击查看在线链接
,会生成在线链接
![9](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004149.png)
- 打开
链接
,红线
上的就是调用的名称
。
![10](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004613.png)
引入字体样式
1.存入css
在页面中右键
--另存为
,存到\themes\butterfly\source\css\
:
![11](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004835.png)
![12](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004847.png)
2.引入文件
![13](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004937.png)
使用图标
可以在\source\_data
中的butterfly.yml
修改social
:
iconfont icon-rss: /atom.xml || RSS链接
![14](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004948.png)
![15](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207004957.png)
当然图标你可以感觉会挺小的,可以在保存的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;
}
![16](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207005007.png)
成果图:
![17](https://gitee.com/MoYu-zc/picgo/raw/master/img/20210207005017.png)