字体图标库-icomoon的使用

!!!记录一下自己学习icomoon字体图标库的过程.
包括两部分：
1.如何将svg图片上传到icomoon上生成字体图标
2.如何在icomoon上下载字体图标

icomoon官网地址
一、如何将svg图片上传到icomoon上生成字体图标
1.进入官网后，点击IcoMoon App

2.点击import Icons,出现弹窗，将自己，要上传的svg选中，上传，上传之后，选中，我们上传的图标，然后点击generate Font，生成字体图标，之后的下载过程就和后面的下载一样了，使用也都是一样的。
①
②
二、从icomoon网站中下载字体图标

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文件夹删除了,又重新黏贴了一遍,结果就好了…