字体图标的使用步骤

一.字体图标的优点

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

二.使用步骤

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_6356