svg字体免费 Icomoon图标使用指南，助你轻松驾驭图标设计

icomoon图标的使用

在早晨，我通过同事的介绍了解了icomoon的图标库，于是便自行上网搜索相关案例。结果证实了这个工具非常实用，只需访问指定网址，挑选心仪的图标，点击“字体设置”按钮，再点击“下载”即可。下载完成后，我将文件解压svg字体免费，并将font文件夹以及style.css文件复制到项目文件夹中，只需引用CSS文件，今后就可以随时参考使用了。

转载了相关介绍：转载自：

近期，我们在项目中广泛采用了字体图标，众所周知，这些图标在放大缩小过程中不会出现失真现象，同时还能显著降低请求量，使用起来十分便捷。下面，我将详细介绍我是如何利用美工提供的.svg文件来制作字体图标并将其应用于实际中的。

借助一个在线生成工具：

1、进入网址：主页面

2、新建一个图集

3、添加.svg图片（可以使用现成的，也可以使用自定义的）

使用现成的点击页面红色的Add Icons...

使用自定义的直接拖拽进图集即可添加

4、生成字体文件

（1）选择好要生成的图标（自由选择）

（2）点击底部的："Generate Font F"

可以自由命名

5、修改完成后，点击生成Font

下载到压缩文件：

将fonts文件夹内的所有文件，以及style.css文件，整体迁移至目标项目中的指定位置。

只需将CSS文件中生成的class名称对应添加至HTML文档中的相应节点，便能够实现字体的添加。

当然，在添加字体时，必须进行font-size的设定，同时，根据具体需求，还可以调整color属性来变换文字的颜色。

转载自:

icomoon图标库是一款非常出色且实用的开源图标集合，其官方网站的链接是

好，接下来介绍如何将该系列图标应用在web页面。

下载选定icomoon图标

打开IcoMoon应用程序，进入相应页面，挑选出你希望嵌入网页的图标，随后点击“编辑”按键，对选中的图标逐一进行修改。

编辑结束后，点击generate font按钮

请点击下载按钮获取字体样式文件，同时svg字体免费，您还可以从getCOde区域获取图标所需的HTML编码。

web代码的编写

首先当然是需要将自定义字体样式引入web页面

@font-face{          定义字体族名为'icomoon';          引入字体文件，格式为'eot'，通过URL指定；              引入字体文件，格式为'eot'，附加查询参数，格式为'embedded-opentype'；              引入字体文件，格式为'woff'，通过URL指定；              引入字体文件，格式为'ttf'，通过URL指定；                引入字体文件，格式为'svg'，指定字体子集为'SofiaProLight'，通过URL指定；              设置字体粗细为正常；              设置字体样式为正常；               }

接下来，需编写HTML代码，同时详细阐述针对特定标签的CSS样式，并在此标签内嵌入icomoon图标。

div元素的后代使用字体族为icomoon，其内容则通过data-icon属性来指定。

通过以上步骤，图标得以显示