uniapp小程序中使用base64格式的字体图标iconfont的详细步骤

下图是uniapp官网中对uniapp中字体图标使用规范的描述
这是官网地址中的原文链接 uniapp官网原文
从官网中对uniapp中字体图标使用规范的描述里可以看出，uniapp中使用字体图标的方式有两种，一种是网络路径的字体图标，另一种就是base64格式的字体图标，本文只说明base64格式的字体图标的使用方法。

第一步 下载iconfont图标

首先打开阿里巴巴矢量图标库 阿里巴巴矢量图标库官网
选好想要的图标后进入我的项目页，点击‘下载至本地’按钮
下载下来是个压缩包，解压之后出现下面几个文件
好！第一步就已经完成了！

第二步 将下载下来的文件转成base64格式

首先打开 transfonter.org，这是一个免费的转base64格式的网站
只用第一步下载下来的文件夹中的ttf格式的文件
将下载下来的压缩包解压得到下面三个文件
将第一步下载下来的文件夹中的这两个文件复制到项目中专门存放静态资源的文件夹中，该文件夹一般命名为static，当然，别的文件夹名也可以
打开转码完成的文件夹中的stylesheet.css文件，会看到如下内容
再打开已经复制到专门存放静态资源的文件夹中的iconfont.css文件，会看到如下内容
将iconfont.css文件中最上面的代码

@font-face {
  font-family: "iconfont"; /* Project id 3557841 */
  src: url('iconfont.woff2?t=1659191503158') format('woff2'),
       url('iconfont.woff?t=1659191503158') format('woff'),
       url('iconfont.ttf?t=1659191503158') format('truetype');
}

替换成stylesheet.css文件中的内容，下图是最终效果
最后只需在需要用到字体图标的页面中引入iconfont.css即可
注意！此处有个小坑，在@import url()的结尾处一定要加分号，否则引入无效，而且不会报错