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