最近在做移动web app项目，前端很多地方需要用到小图标，移动端不像PC端，图标的选择几乎不会去用到图片，因为要做不同屏幕的适配，一般更好的选择是使用字体图标，这样就可以通过CSS随意控制图标的大小和颜色了。项目用到的是iconfont，下面就介绍下如何使用 icomoon图标制作工具 来快速生成字体图标。

首先到http://iconfont.cn/，选择到需要用到的图标。
通过搜索找一个微信图标：

选择或者自己填写合适的颜色，然后选择SVG下载:

下载完成后，打开 icomoon图标制作工具 ，点击左上角的“Import Icons”将刚刚下载的 weixin.svg 导入。

这时候可以在页面看到刚刚的微信图标成功上传，你只需鼠标选中界面上任何需要用到的图标，例如我选中了刚刚上传的微信图标、铅笔图标、音乐图标，点击右下角的“Generate Font”按钮进行创建，每个图标右边的输入框将对应到时候生成的类名icon-*，可以直接修改，再点击dowload下载就行了。

icomoon将自动生成css文件和示例demo.html，使用时只需要添加该图标对应的class就可以。

<span class="icon-weixin"></span>
<span class="icon-pencil"></span>
<span class="icon-images"></span>