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. 打开链接，红线上的就是调用的名称。

引入字体样式

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;
}

成果图：

个人博客为：
MoYu’s Github Blog
MoYu’s Gitee Blog

喜欢 (0)赏

[感谢客官~]

分享 (0)