Official website address: IcoMoon App - Icon the Font, SVG, PDF Generator & PNG
It has been found powerful place:
1, the official website has provided a large number of frequently used icons fonts;
2, can be converted by svg icon fonts;
3, not only the conversion, you can customize the edit icon font (sometimes icon font sizes are not uniform, go to adjust the font size in the course of coordination, relatively complex);
4, the .json file file provides, unlimited use, and more for the new icon fonts, before a key icon font import;
5, to be found .......
Then talk about how to use icomoon, if inappropriate, welcome everyone correction d ===== (¯ ▽ ¯ *) b
1, download icon fonts supplied directly from the official website:
This relatively fast, after all, it does offer a lot, you can add existing individual basis, but remember unified icon font size.
Enter the official website: https://icomoon.io/app/#/select
1, import icons, can be svg file, it may be an existing icomoon .json icon font file;
2, icon library icomoon provided, you can see all the font icon, note that not all icons fonts are free;
3, the operation of the font icon, select, delete, move, modify;
1) Select the first sorting operation, then select the icon. Below, the first three selected icons;
Note: the other three, too, first click on the action icon, as shown above "choice", choose the icon again, careful appears, select the icon is "delete", to click on the icon.
2) Delete 
: will delete the icon from the icon library has been added, the post if it is icomoon icon library icon, clear the browser cache, icon reduction; if it is a custom icon, you need to add or .json svg file again. Therefore, please use caution deleted .
3) Move: to swap the position of the icon, is not currently used, if you need to, you can click 
and then click on the icon to see the effect;
4）.修改
：可修改图标，我所使用到的是统一图标大小，清除图标颜色，避免到时需要使用时再去覆盖其颜色可根据自身情况使用，其它未讲的功能，您可自行尝试；
下图是添加 svg 图标，图标均为 Iconfont-阿里巴巴矢量图标库 下载，很明显，它们的大小肉眼可见的不统一。这里颜色较为统一，待会将仅截图说明。若大小不统一，在使用时，可能诸多不便，所以，接下来讲讲如何统一大小及清除颜色。
首先，我们要修改图标，必须要选择图标。
点击图标后，可打开界面如：
我们依据上图，修改了图标背景框大小，以及图标名称后，接下对图标进行对齐、大小统一、清除颜色等操作。
接下来，统一大小
上图是最快也是最简单的统一大小方式了，因为你只需要将所有图标均统一背景框大小后，再将图标进行填充，即可。
若你需要再次调整，可进行3，放大或缩小，但注意，其它图标也应当如此，且需要注意是调整多少，此时网格便起作用了，你可以依据某边的网格查看，或你记住点击了几次放大/缩小。相信你也觉得挺繁琐吧。想想我先前一个个调整，全是泪 .... 〒▽〒
因此，建议操作1、2步，最方便了。
接下来，清除颜色
清除颜色，相对简单，若图片存在其它颜色，会自动出现上图中水滴样的图标，按顺序执行1、2步即可。
下图为清除前、清除后，可以看出，清除颜色，有时可能起反效果，此时根据实际情况是否需要清除。如果你清除后发现不对，可关闭窗口，ctrl + z 尝试退回清除颜色。实在不可逆了，你只能再重新添加了 ...
需要清除颜色的图标因引起注意：
1. 图标下载时肉眼可见问题；
2. 使用时的不方便，使用麻烦且不说，能否正常显示还是个问题。毕竟我也是踩过大坑的LZ了...让我哭会儿 ╥﹏╥
接下来，我们对齐一下图标，因为有时图标虽然统一大小，但可能“长偏”了，哈哈 ~~~ 我们来给它掰直了 ( •̀ ω •́ )✧
如上图，这种一看就没居中对齐的，使用时，也是很不方便的。我们来掰直它 ...
点击后，图标就完~美~的居中了
由于主要讲讲图标居中，其它按钮您可以尝试点点，反正坏不了，是吧 ？ 哈哈 （。＾▽＾）
至此，修改大小、居中对齐、清除颜色 已讲完。修改后的图标们：
它们是不是整齐多了呢，哈哈 ...
补充个碎点：
接下来，说说追加、下载图标字体
上面已经说了如何添加文件，便不再赘述。
根据需要，选择下载
Generate SVG & More ：提示 SVG,PNG 字样
Generate Font : 提示 Font 字样
确定下载哪种后，点击 “Download” 即可，会下载到浏览器默认地址。找到即可。其中 demo.html 可查看图标。
接下来说说，在项目中使用 icomoon 图标。
将解压后的文件 fonts、style.css 添加到项目中
打开 icomoon 文件夹中的 demo.html ，可看到 下图
下面说说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). 这个方法，是直接复制小矩形框，然后在 html 中用一个元素包括它。
<div class="personal"></div>
.personal{ font-family: 'icomoon';/* style.css 中 @font-face 处所定义的名称 */ }
结果：
3种方式，个人推荐使用1、2。
具体使用哪种，因人而异，自行选择即可。
文章到此，就讲完了，写的是头晕眼花，这怕是我写的最长的文章了。
也不知道有没有遗漏，若有，欢迎各位小伙伴们指正，眼霜缭乱的我，需要下线歇歇了.... (￣o￣) . z Z