还在用png当做小图标吗？Iconfont拯救你

GitHub演示地址：https://github.com/beat-the-buzzer/iconfont.git

我们自己在写Demo或者平时开发的时候，有时候需要一些图标，我们可能会去使用图片，但是这是很低级的做法。因为如果设备的分辨率发生变化，png图片可能会失真。如果我们使用矢量图，就能轻松解决这个问题了。是两题的特点是放大后图像不会失真，和分辨率无关，适用于图形设计、文字设计和一些标志设计、版式设计等。

注册账号

在此之前，我们需要注册iconfont的账号：http://www.iconfont.cn

Iconfont：国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具。

新建项目

第一步：点击图标管理->我的项目->新建项目，稍微填写一下相关信息，新建一个项目。

添加图标

第二步：在首页或者图标库中找到你想要的图标并添加入库

第三步：点击购物车，将这些图标添加至项目

第四步：回到我们的项目中去，我们可以看到刚刚添加的图标，我们自己也可以编辑。

导出资源

第五步：点击Symbol和查看在线链接，会出现一个地址

第六步：将这个地址输入浏览器中访问，可以得到一长串js代码

第七步：Ctrl+A Ctrl+C，新建一个js文件，Ctrl+V

在项目中使用

第八步：将这个js文件引入一个空的HTML文件里，在浏览器上打开这个HTML文件并审查元素，此时我们看到了svg图标已经在浏览器上加载完成了。

第九步：引用svg图标，如果需要，可以使用css去修改样式。引用的方式在下面第三个地址里面有介绍。

使用方法

下面是三种方式使用字体图标的方法：

https://beat-the-buzzer.github.io/iconfont/demo_unicode.html

https://beat-the-buzzer.github.io/iconfont/demo_fontclass.html

https://beat-the-buzzer.github.io/iconfont/demo_symbol.html

这些代码都是在上面导出项目的时候生成的。

最终效果：

至此，一个省事的方案就全部完成了。iconfont上面提供了三种引用字体图标的方法，大家可以按需去使用。

自定义图标

我们可以在iconfont上自己绘制需要的图标，更专业一点，就是用adobe illustrator(Ai)来绘制矢量图。

GitHub演示地址：https://github.com/beat-the-buzzer/iconfont.git