IconFont 矢量图标字体使用教程 - UI - 雨伦博客

在制作网页时，我们会在很多的地方使用到一些用来修饰的小图标。在以往，我们一般都选择使用 .png 格式的图标来进行修饰。但随着审美观的改变、后期维护的成本。png图片作为修饰图标的方法已经显得有些落伍。所以在近几年，逐渐兴起了使用 IconFont 来代替图片对网页小图标进行修饰的方法。先来说说使用 IconFont 的优势：
1. 便于后期维护、更新；
2. 相对于加载几十甚至几百个图片来讲，加载字体更加利于用户体验；
3. 矢量图标不受大小控制，可使用font-size及color任意匹配图标大小及颜色；
4. 可以添加一些视觉效果如：阴影、旋转、透明度；
5. 样式风格统一，助于UI界面的整体性；
6. 兼容IE6；

IconFont 该如何使用呢？

如果需要应用到网站上，首先我们需要先将它分为两个部分。
一：图标字体库。
二：CSS文件。

一，图标库。这个就和我们电脑里自带的字体库一样，只不过它们展现出来的是各种风格的文字、字母、数字（比如：黑体、微软雅黑、宋体等）。而 IconFont 展现出来的是各种网站常用图标。这里 IconFont 的图标库需要包含： .eot / .svg / .ttf / .woff 4个文件来支持不同环境下的各种浏览器。
二，CSS文件。该文件主要是用于设置图标库名称、图标视觉效果以及预设各个图标的class类选择器。
也就是说，该CSS文件应当包含如下三个结构

1.设置字体名称及关联图标库，这里需正确引入图标库文件所在路径。
```css
@font-face {font-family: "YuLunBlog-iconfont";
	src: url('../fonts/iconfont.eot'); /* IE9*/
	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
	url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
	url('../fonts/iconfont.svg#YuLunBlog-iconfont') format('svg'); /* iOS 4.1- */
}
```

2.定义图标库的class类选择器及其他视觉效果。这里的 font-family 值需要与上面定义的保持一致。

```css
.YuLunBlog-iconfont {
	font-size: 18px;
	font-family:"YuLunBlog-iconfont" !important;
	vertical-align: middle;
}
```
3.预设图标库内图标的class类选择器

`.iconfont-gotop:before { content: "\e684"; }`
这里使用:before选择器，来定义每一个图标。而 content 中的值，可以通过 FontCreator 软件选取每个图标中的属性来获得。
接下来，我们只需要把每一个图标，对应定义一个class选择器，比如

```css
.iconfont-gotop:before { content: "\e684"; }
.iconfont-music:before { content: "\e60f"; }
.iconfont-tags:before { content: "\e64b"; }
.iconfont-jieri:before { content: "\e727"; }
.iconfont-jishiqi:before { content: "\e728"; }
.iconfont-pad:before { content: "\e64c"; }
.iconfont-lunzi:before { content: "\e64d"; }
.iconfont-jiandao:before { content: "\e64e"; }
.iconfont-xianshiqi:before { content: "\e64f"; }
.iconfont-zhaoxiangji:before { content: "\e650"; }
.iconfont-danfanxiangji:before { content: "\e651"; }
.iconfont-dayinji:before { content: "\e652"; }
.iconfont-user-zhanzhang:before { content: "\e653"; }
.iconfont-chajian:before { content: "\e654"; }
.iconfont-arrow1-bottom:before { content: "\e674"; }
.iconfont-arrow1-left:before { content: "\e678"; }
.iconfont-arrow1-top:before { content: "\e679"; }
.iconfont-arrow1-right:before { content: "\e67a"; }
```

这样，我们在网页中，引入该css文件。便可以通过
```css
<i class="YuLunBlog-iconfont iconfont-gotop"></i>
```
来引入对应的图标了。

关于后期对 IconFont 的更新与维护，建议到 Iconfont-阿里巴巴矢量图标库（https://www.iconfont.cn）取材。