字体图标库-icomoon的使用(详细)

记录一下自己学习icomoon字体图标库的过程.

文章内容包括四部分：

• 如何将自己的svg图片生成为字体图标。
• 如何在icomoon下载字体图标并且引入到自己的html中。
• 如何追加字体图标。
• 如何将icomoon上面的字体图标修改成我们想要的样子。

首先附上icomoon官网地址：icomoon官网地址

一、如何将自己的svg图片生成为字体图标

1.进入官网后，点击IcoMoon App

2.点击import Icons,出现弹窗，将自己，要上传的svg选中，上传，上传之后，选中，我们上传的图标，然后点击generate Font，生成字体图标，之后的下载过程就和第二部分如何在icomoon下载字体图标是一样的了。
①
②

二、如何在icomoon下载字体图标并且引入到自己的html中

1.进入官网后,点击IcoMoon App

①选择自己要的图标.
②会显示在Selection()里面.
③点击Generate Font创建字体图标

3.点击Generate Font后,进入下载页面,点击Download,下载字体图标到本地

4.下载到本地,解压文件夹,找到里面的fonts文件夹放到我们项目的根目录中,可以新建一个测试的html测试一下,这里我们起名叫字体图标.html。（注意这个文件夹不要删除哦！）
.

5.在样式里面声明我们使用的图标字体,告诉别人我们使用的自定义的字体.这里主要注意两个问题.
① 声明我们使用的icomoon
②注意路径问题!

<style>
        @font-face {
            /* 1.注意font-family:icomoon */
            font-family: 'icomoon';
            /* 2.注意路径! */
            src:  url('fonts/icomoon.eot?7kkyc2');
            src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
                url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
                url('fonts/icomoon.woff?7kkyc2') format('woff'),
                url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
        }
    </style>

5.比如我们要给html文件中的span使用字体图标
①在body中写span标签

②我们打开之前下载下来的icomoon文件夹中的demo.html,在网页中,选中我们想要的图标的右面的小图标,复制,粘贴到我们的span标签中,



③在样式中可以给span标签设置样式

span{
       font-family: "icomoon";
       color:orange;
       font-size:30px;
    }

6.在网页中就可以看到我们的字体图标的效果啦!

注意：
①我还想说一下,就是在这里又遇到了传说中的灵异事件,就是将demo.html打开后,将网页中的小方框黏贴到span标签中,给span设置font-family:"icomoon"之后,网页中的图标仍然显示的是小方框,并没有变成我所需要的字体图标的形状,然后我百度了好久,想看一下到底是哪里的问题,最后也没百度出来,就在我快要放弃的时候,我把fonts文件夹删除了,又重新黏贴了一遍,结果就好了…
②上面说的icomoon文件夹下载后不要删除，是因为我们后面追加字体图标的话会用到！所以一定不要删除哦！

三、追加字体图标

1.注意找到我们之前icomoon文件夹中的selection.json文件

2.打开icomoon网站，点击IcoMoon App

3.点击Import Icons，导入我们的selection.json 文件，会发现之前的字体图标出现了。（这里我们用的是最开始生成手机字体图标的文件夹），然后再选择我们新要的图标，之后selection()出现我们选择了字数，点击右面的Generate Font生成字体图标。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200423134424943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTQwNTM5NQ==,size_16,color_FFFFFF,t_70

4.我们新选择的字体图标和之前的手机字体图标，都会出现，（这里是没有出现，因为在上面，截图截不全，被遮住了，但是通过下面的selection(4)可以看出的确是有四个字体图标的），点击右面的Download，下载会得到icomoon文件夹，这个时候就可以把之前的icomoon文件夹删除掉了。

5.将项目中之前的fonts文件夹删除，然后换成新的icomoon文件夹中的fonts文件夹。之后打开icomoon文件夹中的demo.html网页，将我们需要的字体图标，粘贴到测试字体图标.html文件中，这里我们选择第一个小房子。

7.可以根据自己的需要设置一下样式，我之前已经给span元素设置过了，这里就不再设置了。然后打开网页，会出现我们之前的手机字体图标，和小房子字体图标。

四、 如何将icomoon上面的字体图标修改成我们想要的样子

1.比如我们想要一个向下的三角形，而iconmoon上面的字体图标小三角是向上的。
①那么我们可以点击网站上方小笔一样的编辑按钮
②之后点击我们需要调整的字体图标，这个向右的小三角，会弹出左面的框，然后我们点击旋转按钮，将小三角，旋转到我们想要的方向，之后，点击Duplicate保存生成字体图标即可。
①

②

2.那么我们就会得到一个向下的箭头了。

icomoon小tips：
① 我们在项目中使用字体图标的话一般是用标签。
②使用自己图标的时候，要先声明，再引用，之后在标签中调用，缺一不可。
③不要删掉下载下来的icomoon的文件夹！