我们自己在写Demo或者平时开发的时候，有时候需要一些图标，我们可能会去使用图片，但是这是很低级的做法。因为如果设备的分辨率发生变化，png图片可能会失真。如果我们使用矢量图，就能轻松解决这个问题了。是两题的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。
注册账号
在此之前，我们需要注册iconfont的账号：http://www.iconfont.cn
Iconfont：国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。
新建项目
第一步：点击图标管理->我的项目->新建项目，稍微填写一下相关信息，新建一个项目。
添加图标
第二步：在首页或者图标库中找到你想要的图标并添加入库
第三步：点击购物车，将这些图标添加至项目
第四步：回到我们的项目中去，我们可以看到刚刚添加的图标，我们自己也可以编辑。
导出资源
第五步：点击Symbol和查看在线链接，会出现一个地址
第六步：将这个地址输入浏览器中访问，可以得到一长串js代码
第七步：Ctrl+A Ctrl+C，新建一个js文件，Ctrl+V
在项目中使用
第八步：将这个js文件引入一个空的HTML文件里，在浏览器上打开这个HTML文件并审查元素，此时我们看到了svg图标已经在浏览器上加载完成了。
第九步：引用svg图标，如果需要，可以使用css去修改样式。引用的方式在下面第三个地址里面有介绍。
使用方法
下面是三种方式使用字体图标的方法：
这些代码都是在上面导出项目的时候生成的。
最终效果：
至此，一个省事的方案就全部完成了。iconfont上面提供了三种引用字体图标的方法，大家可以按需去使用。
自定义图标
我们可以在iconfont上自己绘制需要的图标，更专业一点，就是用adobe illustrator(Ai)来绘制矢量图。