IcoMoon将图标转换成web字体

本文总结一款免费开源的Web应用程序IcoMoon制作web图标字体。

使用web字体图标优势

适用性:一个图标字体比一系列的图像(特别是在Retina屏中使用双倍大小的图像)要小。一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像。

可扩展性:图标字体可以用过font-size属性设置其任何大小。这使您能够随时输出不同大小的图标,然而,使用位图,你必须得为每个不同大小的图像输出一个不同文件。

灵活性:文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果。他们还可以在任何背景下显示。

兼容性:网页字体支持所有现代浏览器,包括IE低版本。详细兼容性可以点击这里。

IconMoon优势

提供完整图标解决方案:
600+字符,您可以根据自己需求定制(如就选两个);可以导入其他字体,也进行特别定制(类似fontforge功能);定制字体提供打包导出功能(省去了字体转换),兼容IE6+,现代浏览器以及各类手机设备,且有demo实例,并对字符进行了HTML转化。

IconMoon使用方法

导入或选择图标、对图标进行编辑、生成并输出成zip文件(含字体本身、HTML实例页面和相应的CSS)

导入或选择图标

选择内置图标只需在界面单击相应图标,图标高亮即为选中。
选择
如果你通过AI做好了一个图标想导入,只需点击“Imorticons”按钮,然后选择您想要添加的SVG文件——您也可以一次添加多个文件。这些图标将会出现在“Your Custom Icons”区域中。如果他们是高亮的黄色显示,表示这些图标是你将要创建的图标字体。

对图标进行编辑

编辑
如果你想调整图标的位置、大小或旋转,你可以点击“Edit”按钮。可以使用“Save Copy”按钮来创建图片的变化(例如,一个镜像的衅标)。添加一个有意义的图标标记,因为这将被用来生成类名。

生成并输出成zip文件

点击屏幕底部的“Font”按钮开始生成字体。这样你就可以指定哪个图标映射到哪个字符上,例如,如果你要设置一套六个旋转的球,你可以每 这六个球分别指定字符:q、w、e、r、t和y。你也可以根据你自己的爱好选择一个字体的名字。
输出
单击“Download”下载字体包到你的电脑上。他有一个字文件夹包含了字体本身(woff,eot,ttf格式),以及一个HTML示例页面和相应的CSS。甚至还有一个javascript文件和一个解决方法,如果你需要支持IE或IE7。

如何使用这些图标字体

@font-face引入字体库、调用图标字体

@font-face引入字体库

语法:

1
2
3
4
5
6
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

兼容多种浏览器示例;如果只需兼容现代浏览器,可以按需删除src一些代码。

1
2
3
4
5
6
7
8
9
10
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?1h4iu7'); /* IE9 Compat Modes */
src: url('fonts/icomoon.eot?1h4iu7#iefix') format('embedded-opentype'),/* IE6-IE8 */
url('fonts/icomoon.ttf?1h4iu7') format('truetype'), /* Modern Browsers */
url('fonts/icomoon.woff?1h4iu7') format('woff'), /* Safari, Android, iOS */
url('fonts/icomoon.svg?1h4iu7#icomoon') format('svg'); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}

调用图标字体

通过css属性选择器指定类为”icon-“开头的元素的font-family,并为icon-创建的图标类名定义content。与fontAwesome图标字体使用方法是相同的
css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
[class^="icon-"], [class*=" icon-"] {
/* 使用!important 使样式获得最高优先级 */
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;

/* 使字体变得平滑 =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e900";
}
.icon-office:before {
content: "\e904";
}

然后html中定义类名调用即可:

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

最简单的方法就是将文件夹中的style.css样式文件粘贴到自己项目中的样式表即可。