项目中，总会有一些大大小小的图标，显得页面好看、不再那么枯燥。我们是如何在项目中使用设计师设计好的图标呢。
前期
在最开始，项目中使用图标就是直接设计师切下来的.png图标。后来发现页面中图图标的引用数目太多占据了大部分的请求资源，所以有了 CSS Sprite 将多张小图合并到一个图片上，然后利用CSS背景图片定位，来展示不同的图标。
优点
- 减少了网络请求
缺点
- 使用不便捷。使用不同图标时经常需要，去量其位置，进行css背景定位
- 难以维护。每新增一个图标，都需要改动原始图片，可能影响之前的图片，长期维护的项目可能变得混乱。图片改动还会破环浏览器对图标的缓存。
- 响应式不兼容。这里指的是设计师往往需要根据不同的设备尺寸来准备响应大小的图标@2X，@3x等等。使得代码更为复杂。
font字体图标
后来在一些对图标要求不高的（后台管理系统等）页面，我们都是使用Font Awesome 这种字体图标库，找到类似的图标写入class样式就可以使用了，非常方便。他涵盖了大部分的常用图标。
优点
- 使用方便，无需切图
缺点
- 不可定制化。你只能用他已经存在的图标。
- 找个图标找一年。使用还是有点费事，有时候找不到合适的图标
iconfont 时代
阿里出的一个开源图标库，我相信现在很大部分都在使用，图标库的内容丰富就不用我来介绍了，基本能找到你想用的所有图标，即使没有，设计师也可以上传自己图标。
当前项目已拥有的图标，以及类名，一目了然，维护和使用一目了然。
本文的重点就是介绍，如何在自己项目中使用 iconfont
建立项目图标库
我们登录iconfont后建立一个项目。然后添加一些图标到你的项目内。如图：
官方提供了三种使用方案，具体详情可以查看。在这我主要是说明三种方案的优点劣。
unicode引用
unicode是字体在网页端最原始的应用方式
unicode 使用的本质就是引入一个字体库。写类似 <i class="iconfont">3</i> 里面 3 这样的编号就会生成一个图标。
使用方法
由于这种使用方法基本会被font-class代替就不做详细介绍了，详情请看官方文档。
优点
- 兼容性最好，支持ie6+，及所有现代浏览器。
- 支持按字体的方式去动态调整图标大小，颜色等等。
缺点
- 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
- 取名很乱，都不知道这个符号对应的具体图标形势
- 没有提供cdn服务，每次新图标都要下载后手动添加
font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
使用方法
第一步：拷贝项目下面生成的fontclass代码：
../font_8d5l8fzk5b87iudi.css复制代码
第二步：挑选相应图标并获取类名，应用于页面：
复制代码
优点
- 兼容性良好，支持ie8+，及所有现代浏览器。
- 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
- 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
- 提供了cdn服务，增加图标只需要修改cdn链接即可，不用下载。使用方便。
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css复制代码
将这段代码加入 <header> 的 <link> 中
缺点
- 本质上还是使用的字体，所以多色图标还是不支持的。
symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其实是做了一个svg的集合。
使用步骤如下： 第一步：拷贝项目下面生成的symbol代码：
./iconfont.js复制代码
第二步：加入通用css代码（引入一次就行）：
复制代码
第三步：挑选相应图标并获取类名，应用于页面：
复制代码
优点
- svg矢量图，任意缩放不失真。
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
- 同样提供了cdn服务，增加图标只需要修改cdn链接即可，不用下载。使用方便。
//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js复制代码
将这段代码加入 <header> 的 <link> 中
缺点
- 兼容性较差，支持 ie9+,及现代浏览器。
- 浏览器渲染svg的性能一般，还不如png。
综上所述，其实
symbol引用的缺点在移动端，或者兼容性不苛刻的平台上算不上什么缺点，官方推荐使用这种方法，当然根据自己的项目选择最合理的方案才是最靠谱的。
在 Vue 中使用 icon
在组件化框架这么火热的今天当然要介绍一下，如何在Vue等项目中来使用icon。本人的主要技术栈是Vue所以以Vue作例子。 代码很简单。直接贴代码了。
复制代码
main.js 中注册全局组件
import VIcon from './components/VIcon'Vue.component('v-icon', VIcon)复制代码 .vue 文件中使用
复制代码
总结
目前主要做的是后台管理系统的项目对图标质量不高，用的都是 font-class 方案，移动端用的是 symbol 方案。都是直接用的cdn在线链接。但是对于一些内网项目。更改添加图标还是，不够方便，请大家多点指点。提供一点解决思路。