前端开发离不开图标，会有一部分直接使用图片引进，但是在性能上来说对用户体验不是很好。
字体图标：以字体文件的形式封装，并通过 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。使用
代码语言：javascript复制<svg aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>下载之后只需要复制这几个文件到项目（只复制.css文件也能使用）：
然后link css，就能直接在项目中使用了。后期如果添加修改图标，只需要重新下载覆盖之前的就可，对于原来的不会有影响。
（完）
