微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）

前言

网上的教程几乎都是清一色的引用阿里云矢量图标的在线链接，可惜现在阿里现在已经没有在线链接了。

解决方法

然后我吧文件下载到本地尝试引用，抱歉woff文件识别不了，微信小程序是没法直接识别woff文件的，通通渲染层报错。
原因是：原生小程序无法直接引入woff字体文件。

一个折中的解决方法是把woff文件转换成base64放到wxss文件中。
这对于图标来说还是足够了。

在这里直接选择base64支持也可以。

把下载的字体文件转换成base64，我这里是用的woff2转换的
https://transfonter.org/

记得把base64打开

在这里插入图片描述

然后就可以显示出来了

微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）相关推荐

微信小程序引入阿里巴巴图标库（不下载）
微信小程序引入阿里巴巴图标库(不下载)@TOC 阿里图标地址:https://www.iconfont.cn 第一步:选择资源管理-我的项目-选择Font class-查看在线链接-点击下方css链接 ...
微信小程序引入阿里巴巴图标库
微信小程序引入阿里巴巴图标库在阿里巴巴图标库下载需要的图标,得到iconfont.wxss文件. 将iconfont.wxss文件放在style目录下. 在app.wxss引入,页面里面添加代码 @ ...
微信小程序引入iconfont字体图标（阿里巴巴矢量图标库）
微信小程序怎么引入iconfont字体图标由于微信小程序线上的资源限制了各种接口安全域名,所以在小程序里如果想使用iconfont字体图标就会稍有不同,其实只需要把平时的iconfont字体图标远 ...
解决微信小程序引入iconfont，彩色图标变纯色
刚接触小程序,发现在引入iconfont图标,原来是彩色的图标变成了纯色这是引入小程序内的显示这是在iconfont上的图标我引用的方法是在iconfont上在线生成css,将里面的css复制直 ...
微信小程序引入iconfont彩色图标
小程序引用iconfont前两种不支持彩色,必须使用symbol,使用方法如下: 引用方法名支持多色兼容性 unicode × 好 font-class × 良好 symbol √ 差 1.小程序 ...
微信小程序引入iconfont
微信小程序如何引用阿里iconfont图标库? 1.进入阿里iconfont官网 https://www.iconfont.cn/:新建一个自己的项目,导入自己需要的icon. 2.将项目里的icon ...
微信小程序引入iconfont单色图标实例
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Unicode方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中打开目标项目,下 ...
微信小程序引入iconfont单色图标实例(Font class方式)
进入https://www.iconfont.cn/官网, 搜索目标图标,图标类型为"单色图标" 将需要的图标添加到购物车,点击购物车将图标添加至相应的目标项目中 4. 在小程序项 ...

微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）

前言

解决方法

微信小程序引入iconfont图标，解决渲染层失败（2022年7月11日）相关推荐

最新文章

热门文章