IcoMoon将图标转换成web字体

概要：1.如何使用IcoMoon将矢量图转换成Web字体；2.如何使用生成的字体通过css应用到Web页面中。

使用字体图标的优势

•  适用性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍大小的图像）要小。一旦图标字体加载了，你的图标就会马上渲染出来，不需要下载一个图像。
•  可扩展性：图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标，然而，使用位图，你必须得为每个不同大小的图像输出一个不同文件。
•  灵活性：文字效果可以很容易地应用到你的图标上，包括颜色，阴影和翻转等效果。他们还可以在任何背景下显示。
•  兼容性：网页字体支持所有现代浏览器，包括IE低版本。

创建图标字体的方法

目前为止，最简单的方法是使用Keyamoon制作的一个Web应用程序IcoMoon，可以解决字符转换成Web字体的所有麻烦。

具体步骤

1.设计制作SVG图标

首先，你需要能创建矢量图标的程序，并且能够找到输出SVG格式，比如“Illustrator”或者“iNkscape”。

当你设计的时候，你可以使用任何你喜欢的颜色，但是图标必须是一个纯色。确保每个图标的尺寸大小是相同的。

仔细检查每一个图标，以确保它没有缺陷——细节在小尺寸上是完全的，当你放大的时候小的缺陷就能被发现。在所示图标，我需要删除参差不齐的路径。

在Illustrator中，使用Pathfinder工具统一层叠元素，减去前面元素，比如这些图标中的星星图标。

选择一个图标，并将它复制粘贴到一个新的文档场景中（例如200px X 200px）。缩放也是符合。你可能会发现它有一个基线尺寸的设置。使用彩色的图标，比如说在白色的背景中使用黑色的图标。

选择菜单“文件”中“保存”，并选择将文件保存成“SVG”格式。使用默认的SVG设置。

2.导入到IcoMoon

打开IcoMoon Web app。导入一个图标，点击“Imort icons”按钮，然后选择您想要添加的SVG文件——您也可以一次添加多个文件。这些图标将会出现在“Your Custom Icons”区域中。如果他们是高亮的黄色显示，表示这些图标是你将要创建的图标字体。在这个例子中，你可以看到，我不仅导出我自己创建的图标，我还在“Mini-icons”中添加了别的图标。

亦可使用app自带的图标。

 

3.从IcoMoon中导出字体

点击左上角的功能按钮栏，可分别对图标进行选中，删除，移动以及编辑操作。

编辑如图：

 

当你都准备好了，点击屏幕底部的“Font”按钮开始生成字体。

 

4.下载字体文件

单击“Download”下载字体包到你的电脑上。fonts文件夹包含了字体本身（woff,eot,ttf格式），以及一个HTML示例页面和相应的CSS。甚至还有一个javascript文件和一个解决方法，如果你需要支持IE或IE7。

 

将font文件夹复制到你的网站，为你的项目添加字体。你需要从style.css文件中复制CSS样式，并粘贴到你网站的CSS文件中，但是我的方法是将它重命名为fonts.css，并保持他作为一个单独的CSS文件。你需要的时候在把这个CSS文件引入到你的HTML中。

<link rel="stylesheet" href="fonts.css" />

5、调用字体

正如你看到的样本文件index.html，通过类名可以调用。

例如，如下图标在fonts.css中对应的class是icon-home

.icon-home:before {
  content: "\e900";
}

在html中通过class调用。

<span class="icon-home"></span>

 

参考 http://www.cnblogs.com/hongchenok/p/3833583.html

http://www.w3cplus.com/css3/how-to-turn-your-icons-into-a-web-font.html