css中使用iconmoon图标

一、进入icomoon首页，进入icomoon-APP，选中图标，点击右下角generate font，记住图标标示，而后下载

二、下载后，安装字体，并将其放到css文件夹下

三、在css文件中加入如下代码@font-face {

    font-family: 'icomoon';
    src:url('../CSS/fonts/icomoon/fonts/icomoon.eot');
    src:url('../CSS/fonts/icomoon/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
    url('../CSS/fonts/icomoon/fonts/icomoon.ttf') format('truetype'),
    url('../CSS/fonts/icomoon/fonts/icomoon.woff') format('woff'),
    url('../CSS/fonts/icomoon/fonts/icomoon.svg?#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

四、在css中加入一段代码

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}

[data-icon]:before{
    font-family: icomoon;
    content: attr(data-icon);
    speak:none;

}

在html中

<i class="icon_envelope" data-icon="&#xe903;"></i>

五、或者

在css中

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
}
.icon_envelope:before{
    font-family: "icomoon";
    content:"\e903";
}

在html中

<i class="icon_envelope"></i>

六、此时，基本配置所有完成，图标能够显示，若须要修改样式，继续在css中修改便可