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中修改便可