方便的 IcoMoon 图标字体

官网地址：https://icomoon.io/app/#/select

已发现的方便之处：

1、官网已提供大量常用图标字体；

2、可通过 svg 将其转换为图标字体；

3、不仅可转换，还可自定义编辑图标字体（有时图标字体大小不统一，在使用过程中再去调整字号协调，相对繁杂）；

4、所提供文件中的 .json 文件，可无限次利用，多用于新增图标字体，一键将之前的图标字体导入；

5、.......

下面简单认识一下界面

1、可选图标字体，此界面默认从图标库添加部分图标在此

2、图标库（通过点击上图标注第2处）

在 IcoMoon 官网，目前已发现2种方式获取图标字体：

1、可以直接在官网下载已提供的图标字体；

2、可将其它地方，如自定义的 svg 图标、iconfont 所下载 svg 图标等添加至 IconMoon 中进行转换后，再进行下载使用；

它们下载后的使用方法为一样的，只是获取过程不同。

1、直接从官网下载已提供的图标字体：

这个相对快捷，毕竟确实提供很多，个别你可以在已有的基础上添加，但切记统一图标字体的大小。

步骤：

1）在图标库中添加需要下载的图标库

点击图标库处的“+”，等待页面自动跳转

2）在可选图标界面，选择需要下载的图标

3）下载图标

4）找到名称含 icomoon 的压缩文件，解压后可看到下图文件

2、导入图标，可以是 svg 文件，可以是已有的 icomoon 图标字体的 .json 文件；

这种方式便于将已有 svg 文件转换或图标字体追加

步骤：

1）点击 Import Icons

2）添加成功后，可在选择图标字体界面处看到下图

添加成功后，可继续按照上述第一种方式添加或删除图标字体后，进行下载

统一图标大小，清除图标颜色、图标上下左右居中对齐

我们如果上传的是一些第三方下载的图标字体，如 icoFont 或设计师设计的 svg 图标文件，我们便不保证图标大小一定统一，此时，需要针对图标进行大小或其它方面的处理，接下来，简单陈述一下对图标的修改。

在界面认识的图1中，我们也看到本身是提供了 选择、删除、移动、编辑 4个操作按钮的，在此提醒，谨慎使用删除，避免重来。选择在第一点已介绍，移动则自行尝试即可。

接下来，我们统一图标大小，清除图标颜色、上下左右居中对齐，避免到时需要使用时再去覆盖其颜色。可根据自身情况使用，其它未讲的功能，您可自行尝试；

下图是添加 svg 图标，图标均为 Iconfont-阿里巴巴矢量图标库下载，很明显，它们的大小肉眼可见的不统一。这里颜色较为统一，待会将仅截图说明。若大小不统一，在使用时，可能诸多不便，所以，接下来讲讲如何统一大小、清除颜色、图标对齐。

步骤：

1）、首先，我们要修改图标，必须要选择图标

2）点击图标后，可打开界面如

我们依据上图，修改了图标背景框大小，以及图标名称后，接下对图标进行对齐、大小统一、清除颜色等操作。

3）统一大小

上图是最快也是最简单的统一大小方式了，因为你只需要将所有图标均统一背景框大小后，再将图标进行填充，即可。

若你需要再次调整，可进行3，放大或缩小，但注意，其它图标也应当如此，且需要注意是调整多少，此时网格便起作用了，你可以依据某边的网格查看，或你记住点击了几次放大/缩小。相信你也觉得挺繁琐吧。想想我先前一个个调整，全是泪 .... 〒▽〒

因此，建议操作1、2步，最方便了。

4）清除颜色

清除颜色，相对简单，若图片存在其它颜色，会自动出现上图中水滴样的图标，按顺序执行1、2步即可。

下图为清除前、清除后，可以看出，清除颜色，有时可能起反效果，此时根据实际情况是否需要清除。如果你清除后发现不对，可关闭窗口，ctrl + z 尝试退回清除颜色。

若情况实在不可逆了，你只能再重新添加了 ...

需要清除颜色的图标因引起注意：

1. 图标下载时肉眼可见问题；

2. 使用时的不方便，使用麻烦且不说，能否正常显示还是个问题。毕竟我也是踩过大坑的 LZ了...让我哭会儿 ╥﹏╥

5）对齐图标位置

接下来，我们对齐一下图标，因为有时图标虽然统一大小，但可能“长偏”了，哈哈 ~~~ 我们来给它掰直了 ( •̀ ω •́ )✧

如上图，这种一看就没居中对齐的，使用时，也是很不方便的。我们来掰直它 ...

点击后，图标就完~美~的居中了

由于主要讲讲图标居中，其它按钮您可以尝试点点，反正坏不了，是吧？哈哈（。＾▽＾）

至此，修改大小、居中对齐、清除颜色已讲完。修改后的图标们：

它们是不是整齐多了呢，哈哈 ...

图标字体2种下载方式的区别

1、Generate SVG & More；

2、Generate Font

根据需要，选择下载

Generate SVG & More ：提示 SVG,PNG 字样

Generate Font : 提示 Font 字样

确定下载哪种后，点击 “Download” 即可，会下载到浏览器默认地址。找到即可。其中 demo.html 可查看图标。

使用 icomoon 图标

1. 将解压后的文件 fonts、style.css 添加到项目中

2. 打开 icomoon 文件夹中的 demo.html ，可看到下图

3. 引用图标字体

下面说说3种使用方式，以 .icon-film/e935 为例：

1).直接使用。

直接在需要使用的地方添加类名即可。。

<div class="personal icon-film"></div>

此方法，方便在于改动结构，添加类名，若无其它样式需要调整，无须改动 css 。

结果：

2). 通过伪元素。

需要通过伪元素添加，::before 或 ::after (也可是单冒号，如 :before )

<div class="personal"></div>

.personal{

    font-family: 'icomoon';/* style.css 中 @font-face 处所定义的名称 */

}

.personal::before{

    content: '\e935';

}

此方法，不改动结构，改动 css .

结果：

3). 通过矩形框。

这个方法，是直接复制小矩形框（即第2点中，标记为 3 的矩形框），然后在 html 中用一个元素包括它。

<div class="personal"></div>

.personal{

    font-family: 'icomoon';/* style.css 中 @font-face 处所定义的名称 */

}

结果：

3种方式，个人推荐使用1、2。

具体使用哪种，因人而异，自行选择即可。

文章到此，就讲完了，希望能对您有帮助！

巴特西

方便的 IcoMoon 图标字体

最新文章

热门文章