icon 的前生今世 & iconfont 的晋级之路

　  布吉岛为啥起了个这么文(dou)艺(bi)的名字，话很少说，开始总结👇。

 

1⃣️发展过程

1. 雪碧图：

        起初，大部分图标都是用 img 来实现的。渐渐发现一个页面的请求资源中图片 img 占了大部分，因此为了优化有了image sprite 就是所谓的雪碧图，就是将多个图片合成一个图片，而后利用 css 的 background-position 定位显示不一样的 icon 图标。 

      但这个合成小图片为雪碧图的方式也有一个很大的痛点，维护困难。每新增一个图标，都须要改动原始图片，还可能不当心出错影响到前面定位好的图片，并且一修改雪碧图，图片缓存就失效了，长此以往就不知道该怎么维护了。

2.  Font Awesome：

       后来渐渐地一个项目里几乎不会使用任何本地的图片了，而使用一些 font 库来实现页面图标。常见的如 Font Awesome ，使用起来也很是的方便，但它有一个致命的缺点就是找起来真的很不方便，图标少，定制性不友善。

3. iconfont：

      iconfont 更增强大，它阿里作的开源图库，还有专门的 github issue，图标数量不少，不只有几百个公司的开源图标库，还有各式各样的小图标，还支持自定义建立图标库 ，给前端开发带来了很大便利。

 

2⃣️iconfont的3种使用方式

1. unicode:

   优点： 兼容性最好，支持ie6以上。而且能按照字体的方式调整图标大小，颜色。 

   劣势： 不支持多色图标。在不一样设备的浏览器渲染会有差异，图标显示的位置，大小可能受css影响，很差调整。书写不直观，语意不明确。

     使用方法：引入自定义字体 `font-face；定义使用iconfont的样式；挑选相应图标并获取字体编码，应用于页面

 

 

2. font-class:

     特色： 兼容性良好，支持ie8+，相比于unicode语意明确，书写更直观

     使用方法：拷贝项目下面生成的fontclass代码; 挑选相应图标并获取类名，应用于页面

     主要原理：实际上是和 unicode 同样的，它只是多作了一步，将原先&#xe604这种写法换成了.icon-QQ，它在每一个 class 的 before 属性中写了unicode,省去了人为写的麻烦。如 .icon-QQ:before { content: "\e604"; }

     坑： 一个项目中用到了两组font-class，必定要注意命名空间的问题。

 

 

3. symbol:

    支持多色图标；支持font-size调整样式；支持ie9+；可用css实现动画；减小http请求；矢量，缩放不失真 ；能够精细控制SVG图标部分细节

       使用svg-icon的好处：不再用发送woff|eot|ttf| 这些不少个字体库请求了，svg均可之内联在html内。

 

       使用方法： 第一步：拷贝项目下面生成的symbol代码，引入 ./iconfont.js；加入通用css代码（引入一次就行）；挑选相应图标并获取类名，应用于页面

 

       扩展：svg 是一个真正的矢量，无论你再怎么的放缩它都不会失真模糊，如今ui设计师平时都喜欢使用 sketch 来工做，只要轻松一键就能导出 svg 了，因此 svg 也更受设计师的青睐。

 

  

参考文档：  iconfont    Font Awesome  将来必热：SVG Sprite技术介绍