字体图标iconfont

前端开发离不开图标，会有一部分直接使用图片引进，但是在性能上来说对用户体验不是很好。

字体图标：以字体文件的形式封装，并通过 CSS 的 @font-face 作为 Web Font 调用，达到简单图片的效果。

优点：

1、 轻量性，加载速度快，因为字体图标都非常小。

2、 矢量性，不管在什么分辨率和端下，都有很好的展示效果。

3、 灵活性，各种css效果前端控制，不需要UI修改。

4、 兼容性，支持所有现代浏览器，包括IE低版本。

5、 可维护性，建立一个项目图标之后，可一直更新迭代。

缺点：

1、 与真正图片比起，效果不如图片。

2、 需要UI学习制作图标。

3、 不如图片那样容易重构。

字体图标使用不同公司项目要自己判断，这边推荐使用阿里字体图标：

http://iconfont.cn/home/index

搜索需要的图标：

把想要的图标选中：

点击右上角：

添加至项目，若无项目可新建项目：

然后三种格式都可下载：

Unicode：兼容性最好，支持ie6+，及所有现代浏览器，不支持多色，图标对应的Unicode编码，<i></i>。

Font：兼容性良好，支持ie8+，及所有现代浏览器，不支持多色，使用class来定义图标，<i class="iconfont icon-xxx"></i>。

Symbol：支持多色图标了，不再受单色限制，兼容性较差，支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般，还不如png。使用

<svg aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>

下载之后只需要复制这几个文件到项目（只复制.css文件也能使用）：

然后link css，就能直接在项目中使用了。后期如果添加修改图标，只需要重新下载覆盖之前的就可，对于原来的不会有影响。

（完）