在以往的项目中我们都是使用cssSprite来实现图标，背景图。

随着项目越来越多，遇到了很多问题。

1、如何对图标进行分类：刚开始还比较好，对图标进行分类，大概有菜单图标，首页图标，内页图标，等等。但随着，图标的不断增加和重复应用，发现分类变得很困难。如果把所有图标集成到一张图，但是这样一种情况：有些页面只使用了一个图标，同时用户只在这个页面进行操作；却要下载一整张大图，浪费资源。

2、排版不容易控制：导致使用时图标位置不好控制，因为图标的大小不一样，很难使所有图标按照一定的规律排列；而且，更加痛苦的是，很多时候为了background-position:定位准确，特别保证鼠标hover效果的图片区域和默认图片的区域完全重合；我们常常会每个像素去尝试，调整。

3、不利于维护：新增图标不得不修改psd，有时候为了保证某一类型的在一块区域，不得不调整其他图标的位置。

4、Retina下图标会失真，模糊。

iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont.cn平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。

Iconfont优缺点：

1、兼容性良好。现在主流浏览器（包括IE6）都支持CSS3的自定义字体(@font-face)，因此可以尝试使用font来替换图片展示网站的各种icon。

2、使用方便；开发人员直接调用样式，不用为了background-position:准确定位看瞎眼睛。

3、利于维护，新增，修改，删除图标方便，各个图标之间相对独立。

4、体积很小,请求速度快，可以带来比较好的用户体验。

5、矢量图，放大，拉伸不会失真。

6、单色图标

下面分享一下iconfont实例的制作：

1、打开iconfont矢量图标库上传svg格式：

     上传后的图标：

2、选中图标存储项目：

3、下载到本地后就可以使用了。还提供了使用方法：

4、使用方法：

1、使用字体编码

3

2、通过伪类实现（建议方法）

这样我们的图标就可以通过样式来进行对文字图标的控制了。

鼠标的hover,mouseove，click等事件改变动画，内容，大小就显得容易了。

生成图标的方法二：

建议使用FontCreator，推荐一篇博客 

Tips: iconfont SVG图标转换方法：