前端图片优化（四）：字体图标

博客地址
针对网站中的小图标不仅有精灵图的解决方案，现在比较流行的还有字体图标。通过自定义字体字符代替图片实现一样的效果。

原理

计算机操作系统里面每个字符都有一个unicode编码,根据不同的编码浏览器会自动帮你找到对应的图形去渲染。而字体文件的作用是规定某个字符应该用什么形状来显示。unicode字符集里面，E000 至 F8FF属于用户造字区。原本是空的，用户可以在字体文件里面随便定义这些字符的形状，通过项目引入加载去找到自定义字符，这就和使用操作系统的字体是一样的了。参考博文（字体图标生成原理）。

优势

字体图标的优势自然包含了减少图片的http请求，提高网站性能。同时相比于精灵图，字体图标本质上是字体，可以通过css设置font-size改变图标大小同时不会造成图片失真，也可以通过color设置字体颜色改变图标颜色，相比精灵图更加灵活。但精灵图相比字体图标有更好的色彩表现。

使用

目前网上有很多字体图标库可供我们选择，国外有icomoon,Font Awesome,国内有阿里的iconfont。

下面以在iconfont的使用为例。

1. 新建项目

首先在iconfont先注册一个账号，在图标管理—我的项目里点击新建项目，可以添加其他人协同管理

2. 加入项目

搜索需要的图标，点击添加入库，在购物车点击加入项目，选择需要添加的项目。

3. 下载到本地

在我发起的项目里选中新建的项目，点击下载至本地，会把字体图标等资源下载到本地，其中还会包含演示的demo，可参考demo进行使用。

4.代码中使用

有三种引用方法，分别是Unicode、Font class、Symbol。以Font class为例。
第一步：在代码中引入iconfont.css,在html代码中设置对应的class。

<link rel="stylesheet" href="./iconfont.css">

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

<span class="iconfont iconxxx"></span>