icomoon字体图标的下载与使用

icomoon是外网一个免费的字体图标网站，我们在做网站页面时有的小图标不好截取，这是就可以在icomoon上很方便的选取我们需要的图标下载下来进行引用

使用方法：

先进入icomoon网站中：Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.https://icomoon.io/

 

 然后点击右上角IcoMoon App进入主页面

     这时会出现很多小图标，选择我们需要的图标，Selection中会显示我们选择的图标个数，点击Generate Font生成字体图标

当这个页面中没有我们需要的图标时，我们可以点击左下角Add Icons From Library 去选择更多的需要的图标

此时我们选择的图标就会显示出来，点击Download下载图标，会生成一个压缩包 ，解压之后会有以下文件夹

 * 将其中的fonts文件夹放到项目的根目录中，使用时打开demo.html选择需要的字体对后边的小方框进行复制粘贴即可，在引入字体图标时需要在CSS插入一段代码：

注意：当字体图标显示不出来时，可能是url后边的路径不对，根据自己存放路径进行更改

@font-face {
        font-family: "icomoon";
        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-style: normal;
        font-weight: normal;
        font-display: block;
    }

在html引入字体时：

<span></span>

css需要添加字体样式：

span {
        font-family: 'icomoon';
    }