icomoon字体图标

icomoon字体是一款实用性超强的APP在线图标字体生成工具，支持icomoon.eot、icomoon.svg、icomoon.ttf、icomoon.woff多种格式，使用IcoMoon App将logo变成字体，使用方便快捷，有需要的用户速度来取~

icomoon字体简介

coMoon！一个可以通过个性化设置来创建自定义图标（字体）的生成器！IcoMoon是一项免费的服务，通过使用不同设置使我们能够创建自定义的ICON图或ICON字体。

IcoMoon App - 分分钟打造你自己的 Web Font

官方简介

Icomoon，矢量图标素材分享网，是一个提供一系列的矢量图标素材的博客站点，还有免费的HTML5应用程序的自定义图标字体。IcoMoon成立于2011年，推出的第一个自定义图标字体生成器，它允许用户选择他们所需要的图标，使它们成一字型。它是目前唯一的服务提供了一个简单的SVG图像转换字体。此外，IcoMoon是独特的双音字体图标，并与一个正确对齐字形，它是唯一的Web服务生成清晰的图标字体。

icomoon字体特色

提供600+字符，您可以根据自己需求定制（如就选两个）；可以导入其他字体，也进行特别定制（类似fontforge功能）；定制字体提供打包导出功能（省去了字体转换），兼容IE6+，现代浏览器以及各类手机设备，且有demo实例，并对字符进行了HTML转化。可谓图标字体一条龙服务，又称“图标解决方案”！

图片版是经过CSS Sprites技术处理的PNG格式，字体版有多种格式供我们选择（EOT,SVG,WOFF,TTF）。

此外，除了其他设计师们设计的图标，IcoMoon也有自己免费的海量图标集，它们都非常赞。

IcoMoon App字体转换使用步骤

一、准备 SVG 格式的资源

首先需要将每个字符或者图标保存为 SVG 格式，以便稍后导入到 IcoMoon 中。

Tips:

保存为纯色即可，因为 WebFont 只支持一种颜色

路径节点越少，最后生成的字体文件也就越小

二、导入 SVG 文件到 IcoMoon

打开 IcoMoon App，点击左上角的 "Import Icons" 图标，导入你想要添加的 SVG 文件。

导入文件后，你也可以在网页中对 SVG 进行编辑，选择 "Edit" 按钮，再点击你要编辑的图标就会打开编辑窗口。

三、创建并导出字体

把你要导出的图标全部选中后，点击 "Font >" 按钮转到导出页面，在该页面，你可以编辑每个图标的名称和 Unicode 编码，如果你不了解的话，保持默认即可。

点击 "Preferences" 按钮，在弹出的窗口中，你可以设置 Font Family 的字体名称，class 前缀等参数。

全部调整完毕后，点击 "Download" 按钮下载字体文件包。

四、应用字体

在下载的文件里，主要包含了 Woff/eot/ttf/svg 格式的字体文件和一个 HTML 示例文件及 CSS。

引入 CSS 文件：

通过设置 class 调用相应的字体图标：