如今移动端页面越来越频繁，图标字体的应用也越来越广泛。废话少说，根据自己的实践，今天和大家一起分享两种将图标转换为字体的方法。欢迎大家拍砖！
方法一：SVG+icomoon（目前喜欢并推荐使用）
通常我们会收到一个页面的PSD文件，里面包含一些可以制作成字体的图标。
制作之前请确认您已安装以下软件：
1、 Adobe Photoshop；
2、 Adobe Illustrator；
一、首先生成SVG格式图标：
Step1：复制图标的路径；打开ps选中图层中的路径，然后“Ctrl+C”;
Step2：粘贴路径到Illustrator文档。新建Illustrator 文档，就是“Ctrl+N”，大小建议60x60px，”Ctrl+V”粘贴到该图层；
Step3：为图标填充黑色。在Illustrator中选择右侧 “外观”在“填色”那里选择黑色；
Step4：等比调整图标大小。按住“Shift”键等比调整图标大小，使其适合当前文档大小；
Step5：存储为SVG格式的图标。“Ctrl+ Shift+S”存储为svg格式图标，存储时的选项直接用默认的设置即可，在命名时注意下，会涉及到后面图标样式名称。
Ps：关于Illustrator 文档的设置大小只是建议，因为在ps设计稿中图标的路径大小一般不超过30px，如果是retina屏幕那就不超过60px，设置太大的话等比缩放时会造成小麻烦，所以建议60X60px。
二、利用icomoon生成字体图标：
Step1：浏览器打开icomoon；
Step2：导入svg图标。点击左上角的“import icons”按钮，选择您想要制作成字体的svg图标；
Step3：导出字体图标及demo。选中您需要的图标字体，点击页面最下方的“Font”按钮，在download之前还可以进行些个人的配置。点“Preferences”按钮，可以设置你的字体的名字（Font Name）、样式的前缀或后缀、如果需要兼容IE7及以下的浏览器请勾选上，等还有更多不太常用详细的选项。配置后之后，download it!
Step4：拷贝你所需要的资源到自己的项目。解压文件后，里面有一个示例的demo页面，大家可参考里面的写法，然后把所用的fonts和样式拷贝到自己的项目中，大功告成啦！
Icomoon是目前我所知道的最好用的字体图标工具，它包含免费版和收费版本，免费的图标就有1000+款，具体可在它的library里面查看添加或移出；另外它还可以在Chrome web Store中使用。更多强大功能还等你发现哦。
方法二：使用Fontographer制作图标字体
所需安装的软件：
1、Adobe Illustrator
2、Fontographer 5.1
一、使用Illustrator
1、打开矢量图形
2、选择图形复制到剪贴板
如果图形不是矢量图，可以使用PSD打开，将图形导出EPS格式，再用Illustrator打开，转换为矢量格式，本文不详情。
二、使用Fontographer
1、打开Fontographer，菜单”File”->”New”新建字体文件，双击第一个带有两个”**”的格子，打开编辑页面。此时为了方便查看，建议通过”Windows”->”Tile vertically”将字体列表页和编辑页面左右显示在同一屏幕，这样就可以实时看开编辑的效果。
2、将从Illustrator中复制的图形粘贴到编辑页面。调整位置和大小。
3、将刚制作的字体与相应的字符进行对应。（关键）
关闭编辑页面，回到主界面，选择刚才编辑的格字。
菜单”Element”->”Selection info”，在出现的对话框中填写”Glyph name”（字符）及”Unicode index”（字符编码），点击”ok”，如图：
tips：
（1）、字符容易记住，编码却不易，此时通过”Unicode index”项右边的Get frome “name”按钮获取字符对应编码。
（2）、特殊的unicode E000-EFFF，在unicode中，E000-EFFF是用户造字区，从标准的意思上来讲，这个区间的unicode码最适合来做图标字体。然后使用css的content来将unicode添到文档中去，如下代码：
.icon-home:before{content:”\e000″;}
但content和before伪类，在IE下兼容情况并不是很好，所以本文还是使用英文字母或符号来造图标字体。
4、在菜单”Element”->”Font info”中设置一下作者、版权、字体名称等相关信息。
5、导出的字体文件
使用“ctrl+alt+g”打开字体导出面板，导出.ttf格式的字体
6、使用在线工具，转换字体格式
使用获得fontsquirrel @font-face所需的.eot,.woff,.ttf,.svg字体格式。
fontsquirrel：http://www.fontsquirrel.com/tools/webfont-generator