微信小程序中使用iconfont作为图标库

说明

在小程序项目目录中，只有后缀名在白名单内的文件可以被上传，不在白名单列表内文件在开发工具能被访问到，但无法被上传。下载到本地的 iconfont 字体库文件（.ttf、.woff、.woff2）就不在白名单中，因此，微信小程序在本地时图标可以正常显示，上传后却不会显示。解决方案有以下两种：①直接使用阿里巴巴的网络路径；②将字体库文件转为base64格式。
小程序上传后缀名白名单参见：

https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html#%E5%85%81%E8%AE%B8%E4%B8%8A%E4%BC%A0%E7%9A%84%E6%96%87%E4%BB%B6

下载图标库

阿里巴巴矢量字体库地址: http://www.iconfont.cn/

1. 选择需要的字体添加到购物车。
   
2. 在购物车内，下载代码。
   
3. 解压文件
   

将字体库文件转换为base64格式

在 transfonter.org 将字体库文件转化成base64格式。

1. 上传：找到TTF格式文件，上传到平台（Add fonts）
   

2. 设置：打开Base64编码（Base64 encode），选择下载的格式（Formats）
   

3. 转换（Convert）并下载（Download）压缩包
   

小程序中引入图标库

1. 解压后将 stylesheet.css 中的 Base64 编码替换到图标库 iconfont.css 文件的url中。
   
   
2. 将 iconfont.css 文件复制到项目中，后缀改为 .wxss 在app.wxss中用@import全局引入

@import "./common/iconfont.wxss";

3. 编写代码，上传后测试