Iconfont简介

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

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

新建图标项目

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

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

引入图标

官方文档提供的引入方案

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

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

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

unicode 使用步骤如下:

  1. 第一步:拷贝项目下面生成的 font-face

    1
    2
    3
    4
    5
    6
    7
    @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');
    }
  2. 第二步:定义使用 iconfont 的样式

    1
    2
    3
    4
    5
    6
    .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;}
  3. 第三步:挑选相应图标并获取字体编码,应用于页面

    1
    <i class="iconfont">&#x33;</i>

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

与 unicode 使用方式相比,具有如下特点:

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

Font-class 使用步骤如下:

  1. 第一步:拷贝项目下面生成的 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. 第二步:挑选相应图标并获取类名,应用于页面:
    1
    <i class="iconfont icon-xxx"></i>

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

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

使用步骤如下:

  1. 第一步:拷贝项目下面生成的 symbol 代码:

    1
    //at.alicdn.com/t/font_8d5l8fzk5b87iudi.js
  2. 第二步:加入通用 css 代码(引入一次就行):

    1
    2
    3
    4
    5
    6
    .icon {
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    }
  3. 第三步:挑选相应图标并获取类名,应用于页面:

    1
    2
    3
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
    </svg>
选用方案简介
  1. 线上引入方案,我使用的是官方文档中最便捷的 font-class 方案。这一方案偶尔会出现图标加载不出的情况。但是便于随时对图标库进行升级,换一下在线链接即可,适合新手使用。最新版本的 iconfont 支持直接在项目设置中开启彩色图标,从而实现直接用 class 添加多彩色图标。

  2. 本地引入方案是基于官方文档的 Unicode 和 font-class 方案原理。
    相比于线上引入方案偶尔会出现图标加载不出的情况。本地引入方案则可以说万无一失。但是图标库更新则需要更换包括字体文件在内的诸多内容。

  3. 外挂标签写法基于官方方案的 symbol 引入方案,所以在浏览器支持上有其局限性 IE:别问,问就是老子。但是不得不承认,这一方案是效果最好的。且引入方式也较为简单。
    为了书写方便,我将官方较为繁琐的写法封装成了外挂标签 Tag,具体写法详见示例。

  4. fontclass 的彩色图标,为了避免 css 文件过大,官方设置了限制,单一项目内彩色图标个数上限是 40 个。总结下来,fontclass 是最适合萌新的方案。而 symbol 引入方案依然是最优解。

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

  1. [Blogroot]\themes\butterfly\source\css\custom.css 中填写如下内容,引入 Unicode 和 Font-class 的线上资源:

    1
    @import "//at.alicdn.com/t/font_2264842_b004iy0kk2b.css";
  2. 同时可以在自定义 CSS 中添加如下样式来控制图标默认大小和颜色等属性(若已经在项目设置中勾选了彩色选项,则无需再定义图标颜色),写法与字体样式类似,这恐怕也是它被称为 iconfont(图标字体)的原因:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    .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;
    }
  3. 可以通过自己的阿里图标库的 font-class 方案查询复制相应的 icon-xxxx。

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    - demo.css
    - demo_index.html
    - iconfont.css
    - iconfont.eot
    - iconfont.js
    - iconfont.json
    - iconfont.svg
    - iconfont.ttf
    - iconfont.woff
    - iconfont.woff2
  2. 将 eot、svg、ttf、woff、woff2 后缀的五个文件移至 [Blogroot]\themes\butterfly\source\fonts\ 目录下。

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    @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');
    }
  4. 打开 iconfont.css,复制其中形似如下的代码到 [Blogroot]\themes\butterfly\source\css\custom.css 中:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    .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;
    }
  5. 然后就可以在页面中使用如下形似来使用图标了:

    1
    <i class="iconfont icon-xxx"></i>
  6. 可以通过自己的阿里图标库的 font-class 方案查询复制相应的 icon-xxxx。

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

  1. 找到之前新建的图标项目,选择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 阻塞。

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

    1
    2
    3
    4
    5
    6
    7
    svg.icon {
    width: 1em; height: 1em;
    /* width和height定义图标的默认宽度和高度*/
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    }
  2. 添加外挂标签,在 [Blogroot]\themes\butterfly\scripts\tag\ 目录下新建 iconfont.js,打开 [Blogroot]\themes\butterfly\scripts\tag\iconfont.js, 输入:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    '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);
  3. hexo cl && hexo g 以后即可使用外挂标签的形式来写入图标了。