首先，将图标转换为svg格式
步骤2，使用iconfont生成代码
图标管理-单击“我的图标”。 如下图所示
进入我的图标后，点击上传icon。 如下图所示
单击以上传svg文件，然后单击、
上传后，点击退色提交
上传完成后，自动返回图标管理页面，然后单击“批量操作-批量加入购物车”进入购物车
在购物车中，单击下载代码
在第3步中，将生成的代码应用于项目
生成的项目目录如下：
点击demo_index.html，可以查看官方网站提供的使用方法
因为在我的项目中使用了第二个，所以我只介绍第二个使用方法
第一步是将iconfont.css复制到css样式中
在第2步中，根据iconfont.css中所需的字体，将生成的项目字体文件和svg文件复制到项目目录中。 需要与css文件相同的目录。 否则，必须更改在iconfont.css中引入字体文件的路径。 默认情况下，引入下图中的字体(
步骤3，使用
//或
如果你改变风格
span{
color:red
}
i{
color:red
}
最后原理分析
理解@font face规则
@font face的本质是变量，该规则支持许多css属性。 我们经常使用的是字体系列、src、字体样式和字体权重
首先，让我们看看字体系列。 这里的font-family可以视为变量，您可以自由选择名称，例如使用$符号，但请注意不要覆盖系统已经存在的字体
/*对于/*font-family符号，必须用引号括起来*/
@font-face{
font-family:'$ '
}
使用iconfont生成的@font-face规则font-family如下： */
@font-face{
font-family:'iconfont '
}
接下来，我们来看看重要的src属性。 src属性用于部署字体资源。 引入的字体资源可以使用本地(local )部署，也可以使用url )部署。 请注意，ie9或更高版本支持local
现在，让我们集中讨论url函数
@font-face{
font-family:'icon '；
SRC:URL(icon.EOT ) (格式) (EOT )； /*ie6-8*/
SRC:URL(icon.EOT#iefix ) (格式)嵌入式开放)、
(网址(icon.wofF2 ) )格式(wof F2 ) ) ) ) ) ) ) ) )
URL(Icon.woff ) format (woff )、
URL(icon.TTF ) (格式) (类型真)、
URL(ICON.SVG#ICON ) (格式) (SVG )；
}
//format的作用是让浏览器事先知道导入字体的格式，并决定是否导入字体
上面的代码有五种字体格式： eot、woff、woff2、ttf和svg
svg格式是为了与ios4.1以前的版本兼容，现在的ios版本已经是11了，可以完全舍弃
eot是ie的私有版本，所有版本的ie都支持eot格式，不仅仅是ie6-8。 但是，ie6-ie8只支持eot这一格式
woff(webopenfontformat )是一种专门为web开发而设计的字体，字体大小小，读取速度快，应该优先使用。 安卓4.4开始全面支持
woff2是woff的两代，字体文件大小更小，但只有chrome和firefox支持
TF作为系统的安装字体格式兼容性高，但体积大
综上所述，我们得出了以上结论
果断舍弃svg格式
如果不需要与ie8兼容，则放弃eot格式
如果与Android4.3和更早版本不兼容，将放弃ttf格式
2. iconfont生成字体图标的原理
iconfont生成的字体如下：
@f
ont-face {font-family: "iconfont";
src: url('iconfont.eot?t=1547714990292');
/* IE9 */
src: url('iconfont.eot?t=1547714990292#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAP4AAsAAAAACBgAAAOrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqEJINPATYCJAMICwYABCAFhG0HLhvzBhHVm0XJviiwjblCNx4e1RAbqvoScwd3wUWGawQq7bPvQzw8v+7p3Hnv/52F1bbLColMUKi7FapgBBOVZ2CcDsadACIZ7O93+tTc9nW/JuKoRNUmmiAW/joh4qVzC50Q2dyMtzUqQrEk53k/fUfSbiDkVwD8cbjXpgc4313a5Tjnoi7AOJAC3QPXAgmkD/LJv+Mfxi5oibsJNNLNEDGmNWWOUmYOCsSW0/qVyoxcbkgNpVCvmJnFaTVlcaQ4A3Aq+Pn4SjFKCrXEzJixbuwaIz4AKyLtrnZb4iEwptOCzSNhCDIxp1I/TYr8QySNVH/Wi22lBh8uVeXRN/uPRxB1Jr8JxHahXxPDYV4qdQEy7bmG94PORFqVlcjqH+baAbu7AM71qavD+25xUwr1TdTSXbmOgjo6aOTEtdzzhlD07Wfwh3kNLWxrj7Bjinp06gAWdAde7N/YCAfvirOKDa3s6mN/sJ8ePobHHoaNg/S9S30z1dTNb5s47+kQFh7MCP6N69BdPqII7qzvF2OXbAPsvszfu4zfS9cuo4/fe41Hu47H1ORtqTPw0k8353NTd41KqYcHt8d4高高的大地81ujIHd/JT9939WKmT19BaV8T0GUgcUlMYh5QtAZn08c/zD3y/2idiavJz5oyGdIuw8C6CcGkCHZZGgb2tr32WF30s8se1QLHTBzjI4vpTFv32/uArMNIVuOMe/9uiattoCCv1s7JmyNmnsM132Ghb8VY9/qd0iaO4yFgqGsi3pQVkDaEjVc7aqf7juAtroRNgSjfcFDl2BGnfaPlxuxjJ20utDr0Oy/3YZ/qLFceoimHNsa4yGnacG0Tnm91qCBkydLHIzmuI+HxPexAwAlQofaTjX/0d42/y/5Y3r/8vYQbPKfBKYK1QBnQzUt67IfiHjI51WWOZiiIrjMpw4Zr0bkoaaYQKw+ZW3g41tiXRhpIzIBQa6ApJqQ8yY4dATWPDoK40HBoZbPz8xlrbJYncEIMcABBauAqFZu5C0sJjZMa+gZp2vkNdi0jQyLwgV2yM6hdRjWbUgg7MH6LdGtkqUWHqDf27aE6zAvwL+YwumPoxH7piQ55izPnxswgB8VZhBfthKRvsvCW00geRfRkGqrpRb7faKaMZtaAD5g+i3Rp5zUUVvn9D/y6aG2qqtC/kM3YOJr2xA/LKb51qbuWQ8+NnIgSItwpWoMVi+TewV3dLaKUXBnj3xYAaUVd+v7ywvt0WaMSUFGHlJnlH0f+uAwA=') format('woff2'), url('iconfont.woff?t=1547714990292') format('woff'), url('iconfont.ttf?t=1547714990292') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1547714990292#iconfont') format('svg');
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 18px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
cursor: pointer;
}
.icon-play:before {
content: "e601";
}
这里有两个需要关注的东西，一个是字体,另一个是字符，这两个东西就是字体图标技术的本质。
字体的本质是字符集与图形的一种映射关系。
字体图标技术的实现就是把通常的字符集映射成了另外的图标形状.
例如把 e601映射成了