获取图标的Web字体

IcoMoon是一个非常方便的Web应用程序，让你创建你自己需要的图标。你可以直接在IcoMoon应用程序中选择你需要的图标，也可以从你的本地上传你自己设计的图标。有关于如何将你自己的图标制作成Web字体，如果你感兴趣，可以点击早前翻译的一篇文章《如何把你的图标转换成web字体》。为了节省时间，这里所介绍的图标，都是直接在IcoMoon应用程序中获取的。接下来简单的介绍一下获取图标字体的方法：

Step1

在你浏览器的地址栏中输入http://icomoon.io/app/，或者直击这里，打开IcoMoon应用程序：

Step2

直接在应用程序中选择你自己需要的字体图标，此处选择的是"Stephen Hutchings"制作的“Typicons”图标，在Typicons图标系列中选择你自己喜欢的Icon，被选中的图标会呈橙色高亮状态：

如果你在IcoMoon应用程序首屏处未找到自己喜欢的字体图标，可以点击"More ICon Sets"链接，进入IcoMoon字体图标库中：

进入字体图标库中，可以选择你自己喜欢的字体库，比如说，你看中了Dave Gandy的Font Awesome(一个经典的字体图标库)，直接点击“Add”按钮：

这样你就可以在IcoMoon应用程序中看到Font Awesome图标：

或许你的网站图标都比较个性化，无法在IcoMoon中找到你需要的字体图标，而且你具有这方面的才华，自己设计了一套ICONS，但苦于无法转换成Web字体。那么你只要记住IcoMoon，他就能帮你实现，你只要点击"Import Icons"按钮，导入你自己设计的SVG文件：

详细操作请点击这里。

Step3

选择了你需要的ICON之后，可以生成图片，或者生成字体文件，我们需要的字体文件：

Step4

最后就是将IcoMoon应用程序生成的Web字体下载到你的项目中：

将下载下来的文件解压缩，并将"fonts"文件夹复制到你的项目中：

Step5

在下载下来的文件中，打开"index.html"文件，你可以查到对应图标的硬编码以及对应的类名：