Iconfont简介
阿里图标库全名阿里巴巴矢量图标库。提供了丰富的免费图标资源。并且支持多种引入方式。
本帖讨论的引入方案虽然是基于 Butterfly 主题进行的,但是仅仅是特化了引入写法(Butterfly 的文件引入使用 inject 配置项), 整体内容是完全可以兼容其他主题的。读者可以在熟读教程后自行修改引入方案。
新建图标项目
- 访问阿里巴巴矢量图标库 , 注册登录。
- 搜索自己心仪的图标,然后选择添加入库,加到购物车。
- 选择完毕后点击右上角的购物车图标,打开侧栏,选择添加到项目,如果没有项目就新建一个。
- 可以通过上方顶栏菜单 -> 资源管理 -> 我的项目,找到之前添加的图标项目。
现在的 iconfont 可以在图标库的项目设置里直接打开彩色设置,然后采用 fontclass 的引用方式即可使用多彩图标。但是单一项目彩色图标上限是 40 个图标,酌情采用。
引入图标
官方文档提供的引入方案
unicode 是字体在网页端最原始的应用方式,特点是:
- 兼容性最好,支持 ie6+,及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小,颜色等等。
- 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
unicode 使用步骤如下:
第一步:拷贝项目下面生成的 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');
}第二步:定义使用 iconfont 的样式
1
2
3
4
5
6.iconfont{
font-family:"iconfont" ;
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
3inject:
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 代码(引入一次就行):
1
2
3
4
5
6.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(图标字体)的原因:
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" ;
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 个图标,酌情采用
找到之前新建的图标项目,选择下载至本地,将图标库内容下载下来,然后解压。应该会得到如下文件:
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将 eot、svg、ttf、woff、woff2 后缀的五个文件移至
[Blogroot]\themes\butterfly\source\fonts\
目录下。在
[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');
}打开 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" ;
/* 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。
现在的 iconfont 可以在图标库的项目设置里直接打开彩色设置,然后采用 fontclass 的引用方式即可使用多彩图标。但是单一项目彩色图标上限是 40 个图标,如果对图标有大量需求而又不想引入过多 css 链接的,则 symbol 依然是最优解。
- 找到之前新建的图标项目,选择Symbol->查看在线链接,获取 Symbol.js 的在线链接,并引入。
以 Butterfly 主题为例,在 [Blogroot]\_config.butterfly.yml
的 inject 配置项中填入:
1 | inject: |
此处 async 是异步加载属性,能够减少 HTML 阻塞。
打开
[Blogroot]\themes\butterfly\source\css\custom.css
, 输入以下内容:1
2
3
4
5
6
7svg.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
, 输入:1
2
3
4
5
6
7
8
9
10;
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 以后即可使用外挂标签的形式来写入图标了。