页面引用font-face字体图标，并且是base64格式

在页面中，我们有时候对一个图标可能比较灵活，动态设置颜色等等，就会用到字体图标

字体图标一般会在https://www.iconfont.cn/阿里图标库下载

这里要注意，如果想下载字体格式，先把字体加入到购物车，进入购物车，会发现有一个下载代码，下载后，会把字体文件打包下载下来。

接下来可以通过直接在项目中引用字体文件来使用，也可以把字体转成base64来使用，我们这里说一下怎么把字体格式转base64。

第一步

进入https://transfonter.org/字体转换网站，进入后有一个 Add fonts 按钮，添加一个字体文件，这里上传的是TTF格式文件，把刚刚阿里图标库下载的字体包，里面的TTF文件上传上去，然后有一个Formats选项，把TTF勾选上，其余的都不选，然后再把Base64 encode开关打开，最后点击Convert按钮，下载下来，打开stylesheet.css 文件，里面就是生成的字体base64，就可以贴在代码中了。

@font-face {
    font-family: 'iconlove';
    src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQ........... format('truetype');
    font-weight: normal;
    font-style: normal;
}

上面代码就是下载下来的

.iconlove {
    font-family: "iconlove" !important;
    font-size: 16px;
    font-style: normal;
    color: #B2B2B4;
}

在这个基础上，我们可以扩充相关的样式

第二步

第二步也是最后一步，那就是增加一个样式

刚刚从阿里图标库下载的包，找到iconfont.css的文件，里面有这样一个样式

.icon-icon-test:before {
  content: "\e608";
}

找到后和前面的两个样式代码放在一起，就能生效啦！！！