微信小程序中使用 iconfont 字体图标
一、创建项目
在 https://www.iconfont.cn/ 中新建项目，填写项目名称、前缀等信息，注意字体格式选择 TTF、WOFF、Base64，选择 base64 是为了将另外两种字体转为 base64 形式，而选择 woff 与 ttf 字体原因如下：
TTF 兼容性更好，缺点是字体文件体积大；
WOFF 与 TTF 字体相比体积小且表现性好；
WOFF2 字体是对 WOFF 字体的升级，但兼容性欠佳。微信的官方文档中也建议选择以上两种字体：
建议格式为 TTF 和 WOFF，WOFF2 在低版本的 iOS 上会不兼容。将需要的图标添加到购物车，再添加到项目。
二、小程序引入
1、下载icon文件
在 iconfont 项目页面，选择 Unicode 方式，并点击 下载到本地 按钮，解压并打开下载好的文件。
2、导入到小程序项目
将 iconfont.css 复制到项目中并修改后缀为 wxss，我这里放在 static/iconfont/iconfont.wxss。
3、全局引入
app.wxss 中全局引入 iconfont.wxss
@import "/static/iconfont/iconfont.wxss";4、样式调整
字体图标是使用 css 伪元素的方式实现，由于字体图标质量层次不齐，我在日常使用中一般会对其做一些调整，如设置默认水平垂直居中、默认字体大小改为 rpx 单位，以适应微信小程序，代码如下：
.iconfont
font-family: "iconfont" !important;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}增加新图标时也只需要替换该文件即可
三、使用
项目引入iconfont文件后，在相应页面的代码中使用的时候直接在元素的class中加入iconfont和icon对应的名字即可，再根据设计稿设置下fontSize大小即可。
<text class="iconfont icon-xxx" />参考：
https://juejin.cn/post/7165458111283593247#heading-9