引入 Iconfont 阿里图标矢量库

Iconfont简介

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

阿里巴巴矢量图标库

https://www.iconfont.cn/

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

新建图标项目

访问阿里巴巴矢量图标库 , 注册登录。
搜索自己心仪的图标，然后选择添加入库，加到购物车。
选择完毕后点击右上角的购物车图标，打开侧栏，选择添加到项目，如果没有项目就新建一个。
可以通过上方顶栏菜单 -> 资源管理 -> 我的项目，找到之前添加的图标项目。
现在的 iconfont 可以在图标库的项目设置里直接打开彩色设置，然后采用 fontclass 的引用方式即可使用多彩图标。但是单一项目彩色图标上限是 40 个图标，酌情采用。

引入图标

官方文档提供的引入方案

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

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

兼容性最好，支持 ie6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 unicode 模式下将不能使用，如果有需求建议使用 symbol 的引用方式。

unicode 使用步骤如下：

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

@font-face {font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
  url('iconfont.woff') format('woff'),
  url('iconfont.ttf') format('truetype'),
  url('iconfont.svg#iconfont') format('svg');
}

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

.iconfont{
  font-family:"iconfont" !important;
  font-size:16px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;}

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

font-class 是 unicode 使用方式的一种变种，主要是解决 unicode 书写不直观，语意不明确的问题。

与 unicode 使用方式相比，具有如下特点：

兼容性良好，支持 ie8+，及所有现代浏览器。
相比于 unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 unicode 引用。
不过因为本质上还是使用的字体，所以多色图标还是不支持的。

Font-class 使用步骤如下：

第一步：拷贝项目下面生成的 fontclass 代码：

可以直接使用 link 标签在 inject 配置项中引入：
打开 [Blogroot]\_config.butterfly.yml, 添加样式引用：

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="//at.alicdn.com/t/font_2264842_b004iy0kk2b.css"  media="defer" onload="this.media='all'">

也可以使用 @import 在自定义样式中引入：
打开 custom.css, 添加样式引入：
1
@import "//at.alicdn.com/t/font_2264842_b004iy0kk2b.css";

第二步：挑选相应图标并获取类名，应用于页面：
1

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 svg 的集合，与上面两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size,color 来调整样式。
兼容性较差，支持 ie9+, 及现代浏览器。
浏览器渲染 svg 的性能一般，还不如 png。

使用步骤如下：

第一步：拷贝项目下面生成的 symbol 代码：
1
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js

第二步：加入通用 css 代码（引入一次就行）：

.icon {
   width: 1em; height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
}

第三步：挑选相应图标并获取类名，应用于页面：

1
2
3

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

选用方案简介

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

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

在 [Blogroot]\themes\butterfly\source\css\custom.css 中填写如下内容，引入 Unicode 和 Font-class 的线上资源：
1
@import "//at.alicdn.com/t/font_2264842_b004iy0kk2b.css";

同时可以在自定义 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;
}

可以通过自己的阿里图标库的 font-class 方案查询复制相应的 icon-xxxx。

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

找到之前新建的图标项目，选择下载至本地，将图标库内容下载下来，然后解压。应该会得到如下文件：

- demo.css
- demo_index.html
- iconfont.css
- iconfont.eot
- iconfont.js
- iconfont.json
- iconfont.svg
- iconfont.ttf
- iconfont.woff
- iconfont.woff2

将 eot、svg、ttf、woff、woff2 后缀的五个文件移至 [Blogroot]\themes\butterfly\source\fonts\ 目录下。

在 [Blogroot]\themes\butterfly\source\css\custom.css 中填写如下内容：

@font-face {
font-family: 'iconfont';
src: url('/fonts/iconfont.eot');
src: url('/fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/iconfont.woff2') format('woff2'),
url('/fonts/iconfont.woff') format('woff'),
url('/fonts/iconfont.ttf') format('truetype'),
url('/fonts/iconfont.svg#iconfont') format('svg');
}

打开 iconfont.css，复制其中形似如下的代码到 [Blogroot]\themes\butterfly\source\css\custom.css 中：

.iconfont {
font-family: "iconfont" !important;
/* font-family 可以自定义，但是必须和上面@font-face中的font-family保持一致 */
font-size: 3em;
/* 可以定义图标大小 */
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-rat:before {
  content: "\e60e";
  color: #85c3de;
  /* 可以使用color属性来定义图标颜色 */
  /* 若已经在项目设置中勾选了彩色选项，则无需再定义图标颜色*/
}
.icon-ox:before {
  content: "\e60c";
  color: #ffaf6e;
}
.icon-tiger:before {
  content: "\e611";
  color: #f7c768;
}
.icon-rabbit:before {
  content: "\e60d";
  color: #ffbdd8;
}
.icon-dragon:before {
  content: "\e609";
  color: #ff8787;
}
.icon-snake:before {
  content: "\e610";
  color: #c3d686;
}
.icon-horse:before {
  content: "\e60a";
  color: #ffaf6e;
}
.icon-goat:before {
  content: "\e608";
  color: #f7c768;
}
.icon-monkey:before {
  content: "\e60b";
  color: #c3d686;
}
.icon-rooster:before {
  content: "\e60f";
  color: #ff8787;
}
.icon-dog:before {
  content: "\e607";
  color: #85c3de;
}
.icon-boar:before {
  content: "\e612";
  color: #ffbdd8;
}

然后就可以在页面中使用如下形似来使用图标了:
1
可以通过自己的阿里图标库的 font-class 方案查询复制相应的 icon-xxxx。

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

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

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

    inject:
      head:
      bottom:
+       - <script async src="//at.alicdn.com/t/font_2264842_3izu8i5eoc2.js"></script>

此处 async 是异步加载属性，能够减少 HTML 阻塞。

打开 [Blogroot]\themes\butterfly\source\css\custom.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);