iconfont在微信小程序中不展示

复制代码

微信小程序 iconfont 展示的问题： https://www.duoguyu.com/smart/42.html

iconfont中正常将图标下载至本地
在transfonter网站中将图标转换成base64编码的文件
将iconfont下载的项目文件解压后，点击上传 iconfont.ttf 文件至 transfonter.org 网站。一定要打开base64格式开关

（注：由于微信小程序不支持处理ttf、woff、eot等文件，但支持base64，所以我们需要打开base64格式开关，现将其转换为base64.）

将transfonter转换后的文件解压后，分别选择转换前iconfont下载的 iconfont.ttf 、iconfont.css 和 transfonter转换后的stylesheet.css 这两个文件；复制到 uniapp项目/static/iconfont 文件夹下

最后全局样式文件中导入css

css 复制代码

// iconfont
/* #ifdef H5 */
@import "@/static/iconfont/iconfont.css";
/* #endif */
/* #ifdef MP-WEIXIN */
@import "@/static/iconfont/stylesheet.css";
/* #endif */

App.vue中导入样式文件

css 复制代码

<style lang="scss">
  @import '@/static/scss/index.scss'
</style>