字体图标原理

浏览器根据font-family解析渲染为不同图形的过程：

1. 读取文字内容转换成对应的 unicode码（）；
2. 根据HTML里设置的 font-family （如果没设置则使用浏览器默认设置）去查找电脑里（如果有自定义字体@font-face ，则加载对应字体文件）对应字体的字体文件；
3. 找到文件后根据 unicode 码去查找绘制外形，找到后绘制到页面上；

用元素的伪类before

@font-face {
    font-family: "MyFont";
    src: url('./iconfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
.icon-add:before { 
    font-family:"MyFont" !important;
    font-size:16px;
    font-style:normal;
    content: "\e608";  
    /* 
        相当于    => 解析成 
        注意1：\e608与写法的不同；
        注意2：content属性只在伪类上起作用；
        注意3：标签直接写Unicode码解析后不易理解，难复用。
     */
}

所以大部分工具是生成class使用，图标码写在伪类content中。