iconfont
听群里大佬说，雪碧图现在已经不流行用了……替代雪碧图的方案是iconfont。
今天的任务就是来研究研究iconfont。
什么是iconfont
Iconfont 就是指用字体文件取代图片文件，来展示图标、特殊字体等元素的一种方法。
优点：
- 加载文件体积小。
- 可以直接通过css的font-size，color修改它的大小和颜色，对于需要缩放多个尺寸的图标，是个很好的解决方案。
- 支持一些css3对文字的效果，例如：阴影、旋转、透明度。
- 兼容低版本浏览器。
缺点：
- 矢量图只能是纯色的。
- 制作门槛高，耗时长，维护成本也很高。
如何使用iconfont
使用第三方iconfont在线服务（当然是阿里巴巴iconfont平台啦！！）。下载好项目代码。
Unicode使用方法
将iconfont.css及其字体文件全部存好。在网页中引入iconfont.css。
单纯的将某个span的class取为iconfont然后将text填为图标对应的十六进制代码就可以了。
我们可以为这个span添加color或font-size来修改颜色和大小。
Font Class
iconfont.css也为我们准备好了icon对应的css class。我们也可以直接使用这些class
Symbol
这种方式才是iconfont最为推广的。要使用这种方式，要额外引入iconfont.js，并且使用svg标签。
iconfont原理
在字体文件中，实际上是文字的unicode码，都对应一个图形（一般的图形就是对应的文字）。比如说一个字，在Monaco字体当中是一种形态；在Comic Sans MS中又是另一个形态。
iconfont就是采用这种技术，通过制作字体文件，将我们使用的十六进制代码（实际上也是unicode码）,对应成我们要使用的icon。
也就是说，这些看上去是icon，实际上却是字体文件中的字体！因此我们可以通过color和font-size来修改图标的颜色和大小，因为本质都是文字！
这正是Unicode使用方法的原理。
Font Class方法的原理只是在icon name class添加伪类，在content中添加十六进制代码。
Symbol模式使用了SVG。
SVG？
SVG不学！！
