使用IcoMoon生成图标字体

What is IcoMoon ?

昨儿个托我们美女UI的福，接触了IcoMoon这个网站，之前确实没摸瑟过，原谅我孤陋寡闻，昨天小试了一下感觉不错，赶紧分享之。那么IcoMoon究竟是干哈的呢？接下来简单介绍下。

IcoMoon.png

就我个人而言，往往要想找点什么ICON素材啊，往往都是酱婶滴，先去FontAwesome(在线图标字体库，但资源有限)里面巴拉巴拉，或者其他资源看看有没有合适的。如果没有就去求助我们大UI，笑笑给我来整个“加号”啊，笑笑有“减号”吗？来一个来一个，笑笑再给我来个“垃圾箱”呗...嗯，没错，我一般都是这么折磨我们UI的。个人还是比较喜欢FontAwesome，其提供的资源很丰富，风格很统一，而且直接在页面内引用需要的样式即可，不需要自己再去调整素材的样式。而我们今天要白话的IcoMoon，大致作用就是生成类似FontAwesome的图标字体。

IcoMoon是一个在线的图标字体生成器。其允许我们通过个性化设置生成ICON字体，我们可以上传本地ICON资源也可以使用IcoMoon给我们提供的丰富素材，最终生成的ICON字体有多种格式供我们选择（EOT,SVG,WOFF,TTF）。总而言之，有了这个免费资源，我们就可以个性化的生成ICON字体，然后应用到我们的WEB页面中了。

生成自定义图标字体

当我们想要自己的图标图标字体时，操作步骤就如同把大象关进冰箱里，归纳起来可分为三步：

• 准备自定义ICON素材 ;

• 生成字体文件;

• 在CSS中引用字体文件;

A. 准备自定义ICON素材

此处需要注意的是，icomoon要求素材格式必须为SVG格式，所以其他格式的素材需提前转换，在此不做赘述。

B. 生成图标字体

到 https://icomoon.io/app/#/select 网站生成图标，具体过程如下：

1 单击 import icons 按钮 导入我们准备好的svg 图标，或者Add Icons From Library引用这个网站上的一些现成图标。

导入素材.png

2 素材添加完成后，点击右下角Font F按钮进入属性设置页面。

字体设置.png

3 点击Preferences按钮，进行字体属性设置。

设置按钮.png

这里我们可以设置字体的名称，字体样式名称，以及对浏览器的兼容性

字体属性.png

4 下载字体文件及demo，点击页面右下方的Download按钮打包下载所有资源。

下载字体及demo.png

5 解压下载后的压缩包，可以得到以下的文件夹 其中包括demo，style.css 及fonts文件中的字体文件就是我们要的。使用时，一起拷贝到我们的项目中即可。

压缩包.png

C 在项目中引用

1 将所要用的css 及字体文件放到一个文件夹中。

引入图标字体.png

2 在index.html 中引入我们的css。

引入样式.png

3 在需要的页面引用，直接加到相应标签的class属性中，作为样式引用即可。

标签内引用.png

至此，Class is over！从此以后，UI再也不用担心你烦她了！

作者：桂圆_noble
链接：https://www.jianshu.com/p/86fca912fd1d