css中使用iconmoon图标

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

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

3、在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;
}

4、在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>

5、或者

在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>

6、此时，基本配置全部完成，图标可以显示，若需要修改样式，继续在css中修改即可

 

转载于:https://www.cnblogs.com/Christina-Aries/p/5269004.html