Iconfont Inject

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

现在的 iconfont 可以在图标库的项目设置里直接打开彩色设置，然后采用 fontclass 的引用方式即可使用多彩图标。但是单一项目彩色图标上限是 40 个图标，酌情采用。

引入图标

官方文档提供的引入方案

阿里巴巴矢量图标库使用文档

unicode 是字体在网页端最原始的应用方式，特点是：

兼容性最好，支持 ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版 iconfont 支持多色图标，这些多色图标在 unicode 模式下将不能使用，如果有需求建议使用 symbol 的引用方式。

unicode 使用步骤如下：

第一步：拷贝项目下面生成的 font-face

css
第二步：定义使用 iconfont 的样式

css
第三步：挑选相应图标并获取字体编码，应用于页面

html

选用方案简介

线上引入方案，我使用的是官方文档中最便捷的 font-class 方案。这一方案偶尔会出现图标加载不出的情况。但是便于随时对图标库进行升级，换一下在线链接即可，适合新手使用。最新版本的 iconfont 支持直接在项目设置中开启彩色图标，从而实现直接用 class 添加多彩色图标。
本地引入方案是基于官方文档的 Unicode 和 font-class 方案原理。
相比于线上引入方案偶尔会出现图标加载不出的情况。本地引入方案则可以说万无一失。但是图标库更新则需要更换包括字体文件在内的诸多内容。
外挂标签写法基于官方方案的 symbol 引入方案，所以在浏览器支持上有其局限性 ~~IE：别问，问就是老子~~。但是不得不承认，这一方案是效果最好的。且引入方式也较为简单。
为了书写方便，我将官方较为繁琐的写法封装成了外挂标签 [Tag]，具体写法详见示例。
fontclass 的彩色图标，为了避免 css 文件过大，官方设置了限制，单一项目内彩色图标个数上限是 40 个。总结下来，fontclass 是最适合萌新的方案。而 symbol 引入方案依然是最优解。

现在的 iconfont 可以在图标库的项目设置里直接打开彩色设置，然后采用 fontclass 的引用方式即可使用多彩图标。但是单一项目彩色图标上限是 40 个图标，如果对图标有大量需求而又不想引入过多 css 链接的，则 symbol 依然是最优解。

找到之前新建的图标项目，选择 Symbol-> 查看在线链接，获取 Symbol.js 的在线链接，并引入。

以 Butterfly 主题为例，在 [Blogroot]\_config.butterfly.yml 的 inject 配置项中填入：

diff
```
 inject:
 head:
 bottom:
+       - <script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script>
```
此处 async 是异步加载属性，能够减少 HTML 阻塞。

打开 [Blogroot]\themes\butterfly\source\css\custom.css, 输入以下内容:

css

svg.icon {
 width: 1em; height: 1em;
 /* width和height定义图标的默认宽度和高度*/
 vertical-align: -0.15em;
 fill: currentColor;
 overflow: hidden;
}

添加外挂标签，在 [Blogroot]\themes\butterfly\scripts\tag\ 目录下新建 iconfont.js，打开 [Blogroot]\themes\butterfly\scripts\tag\iconfont.js, 输入：

'use strict';
function iconFont(args) {
 args = args.join(' ').split(',')
 let p0 = args[0]
 let p1 = args[1]?args[1]:1
 return `<svg class="icon" style="width:${p1}em; height:${p1}em" aria-hidden="true"><use xlink:href="#${p0}"></use></svg>`;
}
hexo.extend.tag.register('icon',iconFont);