字体图标的使用

1. 字体图标的优点：兼容性好，不会失真、可以设置大小和颜色。

2. 字体图标的使用
   （1）准备好字体图标的库文件：
   
   （2）在css中自定义字体图标

 /*1.通过@font-face定义自己的字体*/
@font-face {
    /*2.申明自己的字体名称*/
    font-family: 'mm';
    /*3.引入字体文件（约束某一段字符代码什么图案）*/
    src:
    url(../fonts/MiFie-Web-Font.svg) format('svg'),
    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');
}

（3）定义类样式

.mm_icon{
    font-family: wjs;
}
/*通过伪类向内容添加字体图标*/
.mm_icon_phone::before{
    content: "\e908";
}

（4）在html中引入

/*在html中加入字体图标的类样式即可*/
/*mm_icon表示引入字体图标名称*/
/*mm_icon_phone表示该字体中特定的字体图标，语义性强，可维护性高*/
 

3.追加新图标到原来库里面
如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标，但是原来的不能删除，继续使用，此时我们需要这样做

https://icomoon.io/

把压缩包里面的selection.json 从新上传，然后，选中自己想要新的图标，从新下载压缩包，替换原来文件即可。