引言：

如今移动端页面越来越频繁，图标字体的应用也越来越广泛。废话少说，根据自己的实践，今天和大家一起分享两种将图标转换为字体的方法。欢迎大家拍砖！

方法一：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字体格式。

…