字型圖示固用程式碼

在一些大型的專案中，類似“微金所”等，在首頁通常需要有一些屬於自己的字型圖示，這時需要在專案中建立fonts資料夾，放入幾個必須的檔案，如下圖：

想要下載fonts檔案，點選字型圖示檔案fonts下載哦，取貨碼：uh3l。

 

將上面下載的fonts資料夾放在專案目錄中，想要用到這個還需要在相應的樣式檔案中寫入以下程式碼：

/*1 通過@font-face定義自己的字型*/
@font-face {
    /*2 申明自己的字型名稱 */
    font-family: 'wjs';
    /*3 引入字型檔案(約束某一段字元代表什麼圖案)*/
    src:
        url(../fonts/MiFie-Web-Font.eot) format('embedded-opentype'),
        url(../fonts/MiFie-Web-Font.ttf) format('truetype'),
        url(../fonts/MiFie-Web-Font.woff) format('woff'),
        url(../fonts/MiFie-Web-Font.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}
/*4 怎麼使用維護性更好*/
.wjs_icon{
    font-family: wjs;
}
/*給每個圖示專門設定一個類content是代表圖示的字元，這個由UI組提前設定好的*/
.wjs_icon_phone::before{
    content: '\e908';
}