字体图标的使用步骤

一.字体图标的优势

体积小，本质是字体，能够改变颜色，大小，背景等。

二.使用步骤

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便可，原来的图标会显示出来，能够追加新的，再下载下来就能够。