Iconfont Inject

点击查看更新记录

更新记录

2020-12-12:正式版v1.0

iconfont图标引入方案

将阿里云图标symbol引入改成外挂标签形式

2021-04-26:修复bug

感谢@篁竹水声的反馈。
缩小symbol样式选择域，修复与note外挂标签的自定义图标方案的冲突。

2022-01-14:方案过期警告

iconfont的fontclass现已支持直接使用多彩色图标。
symbol依然可用，但是考虑到魔改源码未必适合所有人，推荐还是用fontclass方式。

2022-01-14:fontclass备注说明

iconfont的fontclass现已支持直接使用多彩色图标。但是使用时发现为了避免文件过大，单一项目若要使用彩色图标，上限是40个图标，不便于单一项目管理。
fontclass适合萌新。但symbol依然是最优解。

点击查看参考教程

参考方向	教程原贴
三种引入方案	阿里巴巴矢量图标库使用文档

简介

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

阿里巴巴矢量图标库

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
<i class="iconfont">3</i>

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
<i class="iconfont icon-xxx"></i>

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个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。

<i class="iconfont icon-rat"></i>
<i class="iconfont icon-ox"></i>
<i class="iconfont icon-tiger"></i>
<i class="iconfont icon-rabbit"></i>
<i class="iconfont icon-dragon"></i>
<i class="iconfont icon-snake"></i>
<i class="iconfont icon-horse"></i>
<i class="iconfont icon-goat"></i>
<i class="iconfont icon-monkey"></i>
<i class="iconfont icon-rooster"></i>
<i class="iconfont icon-dog"></i>
<i class="iconfont icon-boar"></i>

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

- 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
<i class="iconfont icon-xxx"></i>

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

<i class="iconfont icon-rat"></i>
<i class="iconfont icon-ox"></i>
<i class="iconfont icon-tiger"></i>
<i class="iconfont icon-rabbit"></i>
<i class="iconfont icon-dragon"></i>
<i class="iconfont icon-snake"></i>
<i class="iconfont icon-horse"></i>
<i class="iconfont icon-goat"></i>
<i class="iconfont icon-monkey"></i>
<i class="iconfont icon-rooster"></i>
<i class="iconfont icon-dog"></i>
<i class="iconfont icon-boar"></i>

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

找到之前新建的图标项目，选择Symbol->查看在线链接，获取Symbol.js的在线链接,并引入。
以Butterfly主题为例，在[Blogroot]\_config.butterfly.yml的inject配置项中填入：
1
2
3
4
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);

hexo cl && hexo g以后即可使用外挂标签的形式来写入图标了。

1	{% icon [icon-xxxx],[font-size] %}

icon-xxxx：表示图标font-class,可以在自己的阿里矢量图标库项目的font-class引用方案内查询并复制。
font-size：表示图标大小，直接填写数字即可，单位为em。图标大小默认值为1em。

{% icon icon-rat_zi %}{% icon icon-rat,2 %}

{% icon icon-ox_chou,3 %}{% icon icon-ox,4 %}

{% icon icon-tiger_yin,5 %}{% icon icon-tiger,6 %}

{% icon icon-rabbit_mao,1 %}{% icon icon-rabbit,2 %}

{% icon icon-dragon_chen,3 %}{% icon icon-dragon,4 %}

{% icon icon-snake_si,5 %}{% icon icon-snake,6 %}

{% icon icon-horse_wu %}{% icon icon-horse,2 %}

{% icon icon-goat_wei,3 %}{% icon icon-goat,4 %}

{% icon icon-monkey_shen,5 %}{% icon icon-monkey,6 %}

{% icon icon-rooster_you %}{% icon icon-rooster,2 %}

{% icon icon-dog_xu,3 %}{% icon icon-dog,4 %}

{% icon icon-boar_hai,5 %}{% icon icon-boar,6 %}

Iconfont Inject

简介

新建图标项目

引入图标

Anything can I help you ?

Some userful scripts

欢迎使用SAO_Utils_Web 2.0