字體圖標的使用步驟

一.字體圖標的優勢

體積小，本質是字體，能夠改變顏色，大小，背景等。

二.使用步驟

1.UI人員設置svg格式交給前端人員

2.前端上傳svg格式生成兼容性字體文件包

登錄https://icomoon.io->點擊右側IcoMoon App->點擊左上角New Empty Set

->把SVG文件拖入Unititled Set裏面便可

3.下載兼容性字體文件包到本地

若是公司不設置字體圖標，第一，第二步跳過了。

選中須要的圖標->generate Font->會進入Download頁面（這個頁面中能夠看到圖標碼）->Download->本地就有icomoon.zip了,解壓以後的demo.html不要刪除，能夠參考，即便咱們只須要用fonts文件夾。

4.把字體文件包引入頁面中

4.1.把fonts文件夾複製到項目中。

4.2. 聲明 

  @font-face {  

  font-family: 'icomoon';

  src:  url('fonts/icomoon.eot?7kkyc2');

  src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),

    url('fonts/icomoon.ttf?7kkyc2') format('truetype'),

    url('fonts/icomoon.woff?7kkyc2') format('woff'),

    url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');

  font-weight: normal;

  font-style: normal;

}

4.3.給盒子使用字體，必定保證和上面的 font-family相同

第一種：

   span {

    font-family: "icomoon";  

    font-size: 100px;

    color: pink;

   }

第二種：

   div::before {

    font-family: "icomoon";  /* 必定保證和上面的 font-family: 相同 */

    font-size: 100px;

    color: hotpink;

    content: "\e91b";（注意：這裏要加個反斜杆+demo的字體碼）

   }

5.追加字體

把與fonts同級的selection.json經過https://icomoon.io/app/#/select上傳，點擊import Icon便可，原來的圖標會顯示出來，能夠追加新的，再下載下來就能夠。