iconfont是什么？在还没学iconfont的时候我也一直以为一些样式的图标列表都是插入的图片或者插入的背景图。学过iconfont之后仿佛打开了新世界的大门~
1.什么是iconfont
首先先来解释下什么是iconfont，我的理解就是用字体代替图片来展示图标或者特殊字体的方法。比如我们经常在淘宝上看到的
在新浪微博贴吧类似网站可以看到
特别在手机端这种方法用的更多了。
刚开始我在做这些效果时都是用image-background来做这些效果。还要考虑到图片的大小问题，总之很麻烦。
2.iconfont优缺点
之前也说了如果按照常规方式来插入背景图的话要考虑到图片本身大小的问题，当元素大时图片就会失真变得很模糊。并且一张张图片占用内存，在调用的时候还要一张一张的找。所以iconfont可以总结一下两个优点。
1.首先它的体积要比图片小的多。
2.不仅体积小，而且还具有更好的可维护性（因为是矢量，所以拉伸不变形；颜色可以自行更换，支持一些CSS3对文字的效果）
3.怎么使用iconfont
1.登陆阿里巴巴矢量图标库http://www.iconfont.cn/（矢量图标库有很多，这里用阿里巴巴图标库来演示）
2.登陆过后就可以看到首页有很多网友自己制作的彩色素材。这里不建议用彩色的素材因为有些浏览器不太兼容。
3.选择需要用到的素材后点击购物车按钮（如果只保存一个素材的话可以直接点击下载）
4.选择好后在左上角购物车里选择下载代码。
5.把下载下来的解压出来是一个iconfont的文件夹，把它放在自己的站点下面。（iconfont文件夹里面有这些文件）
6.在我们自己的样式文件里引用上图的iconfont.css文件
<link href="iconfont/iconfont.css" rel="stylesheet" type="text/css">
打开这个文件我们会在里面发现这样一个类
这个类就是用来控制iconfont的大小样式的，我们不去管它。
7.打开iconfont文件夹下面的demo_unicode.html文件会发现你所保存的图标，在图标下面会有一串字符它就相当于这个素材的编号。
8.最后把编号填入到自己用到的地方就可以了（不要忘了要引用iconfont这个类和后面的分号也不要忘记）
还可以在自己的样式里面在自己给这个类覆盖样式一些字体的样式也可以在它上面使用，比如字体颜色，字体大小之类的。最终效果如下图所示：
