字体图标icomoon简单粗暴使用方式

总结：先导入，再导出。目的是为了导出。你可以单独导出一个icon。也可以把你目前项目里面的已有icon 和 你新追加的icon一并全集导出（全集导出就需要你先把你本地的icon给人网页先到进去，要不别人怎么知道你本地现有的是些啥icon）。这样做的话不会导致项目里面的icon莫名丢失。
步骤：
1、打开官网https://icomoon.io/
2、点击页面右上角，IcoMoon App。如下图：

image.png

3、点击页面左上角Import Icons。顾名思义，是要你导入文件，这里可以是svg可以是select.json也可以是你想试着导入的一切图标文件，能不能成，你试试看就行了。正常是导入select.json文件。这个文件里面包含了所有现有的图标。在这里，导入icon有2个使用方式：
1）导入你当前项目里面正在使用的所有字体图标，导入之后，他们会呈现在页面上，你要全部选择，然后再选择你这次想要追加的icon，这样就是你原本项目里面有的icon+ 你新追加的icon是一个全集。这个时候导出的话，就是全集icon。以前的不会丢失，追加的已经上去。
2）导入一个img或者svg或者png文件，让它生成字体图标，方便使用。

image.png

4、导出。点击页面上的Generate SVG & More 再点击download，那么你得到的就是svg或者png等等。如果你想要一套方便使用的字体图标，那么请点击Generate Font 再点击download，此刻，就得到了一个压缩包，里面的demo.html用浏览器打开，就看到了所有的icon的展示，这里面的icon是本来项目中就有的icon 和 追加的icon的合集。

image.png

image.png

5、引入。如图，这几个文件当中：
1）4个不同后缀的名为icomoon的文件是至关重要的，必须导入。如果项目已经有了，就是替换。
2）style.css自己看着导入吧，它只是给字体图标命名的作用，为了规范和下次追加方便，最好是导入。如果项目已经有了，就是替换。
3）demo.html最好也是导入，相当于一个字体图标的地图，使用起来一目了然，所有icon尽收眼下，如果不导入demo.html那么将来使用时，只能靠猜测来试哪个icon是哪个class是哪个content。如果项目已经有了，就是替换。
4）selection.json最好导入，方便下次追加新的icon时，导入给icomoon官网。如果项目已经有了，就是替换。

image.png