引入阿里图标库

Butterfly主题魔改教程，引入阿里图标库。

我的博客主题版本为：hexo5.4、Butterfly3.6.2

如果与我的版本不一样可能会有略微差别，届时请自行百度。

本文参考文章：Akilarの糖果屋的《Iconfont Inject》。

1.简介

阿里图标库全名阿里巴巴矢量图标库。提供了丰富的免费图标资源。并且支持多种引入方式。

本帖讨论的引入方案虽然是基于Butterfly主题进行的，但是仅仅是特化了引入写法（Butterfly的文件引入使用inject配置项),整体内容是完全可以兼容其他主题的。读者可以在熟读教程后自行修改引入方案。

2.新建图标项目

访问阿里巴巴矢量图标库,注册登录。
搜索自己心仪的图标，然后选择加到购物车。
选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目，如果没有项目就新建一个。
可以通过页面上方的顶栏菜单：资源管理->我的项目，找到之前添加的图标项目。

3.引入图标

本博客采用糖果屋教程中Font-class引用的线上引入方案引入图标，也可以参考阿里巴巴矢量图标库使用文档。

3.1特点：

Font-class引用具有如下特点：
- 兼容性良好，支持ie8+，及所有现代浏览器。
- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
线上引入方案的特点：
- 这一方案偶尔会出现图标加载不出的情况。
- 但是便于随时对图标库进行升级，换一下在线链接即可，适合新手使用。

3.2引入步骤：

第一步：拷贝项目下面生成的fontclass代码：
- 可以直接使用link标签在inject配置项中引入：
  打开[Blogroot]\_config.butterfly.yml,添加样式引用：
  inject:
  head:
  - <link rel="stylesheet" href="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css" media="defer" onload="this.media='all'">
- 也可以使用@import在自定义样式中引入：
  打开custom.css,添加样式引入：
  @import url("//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css");
第二步：挑选相应图标并获取类名（可以通过自己的阿里图标库的font-class方案查询复制相应的icon-xxxx），应用于页面：
<i class="iconfont icon-xxx"></i>

同时可以在自定义custom.css中添加如下样式来控制图标默认大小和颜色等属性，写法与字体样式类似，这恐怕也是它被称为iconfont（图标字体）的原因:

.iconfont {
font-family: "iconfont" !important;
font-size: 3em;
/* 可以定义图标大小 */
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-rat:before {
  color: #85c3de;
}
.icon-ox:before {
  color: #ffaf6e;
}
.icon-tiger:before {
  color: #f7c768;
}
.icon-rabbit:before {
  color: #ffbdd8;
}
.icon-dragon:before {
  color: #ff8787;
}
.icon-snake:before {
  color: #c3d686;
}
.icon-horse:before {
  color: #ffaf6e;
}
.icon-goat:before {
  color: #f7c768;
}
.icon-monkey:before {
  color: #c3d686;
}
.icon-rooster:before {
  color: #ff8787;
}
.icon-dog:before {
  color: #85c3de;
}
.icon-boar:before {
  color: #ffbdd8;
}

如有错误，欢迎评论区留言！