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

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

优点：

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

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

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

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

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

缺点：

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

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

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

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

搜索需要的图标：

把想要的图标选中：

点击右上角：

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

然后三种格式都可下载：

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

Font：兼容性良好，支持ie8+，及所有现代浏览器，不支持多色，使用class来定义图标，。

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

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

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

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

欢迎关注Coding个人笔记公众号