关于 uniapp 中,自定义的icon不显示

在开发uniapp项目时遇到引入iconfont字体图标不显示的问题,经排查发现是由于开启了彩色选项导致在HBuilderX内置浏览器下无法显示。通过取消彩色选项设置,成功解决了字体图标在内置浏览器中不显示的故障。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开发 uniapp时,需要引入 iconfont中的我们自己的字体图标库时,我按照以往在 vue中的引入方法并结合 uniapp官方提供的步骤,一步一步走下来,结果发现字体图标不显示,而且需要修改的文件地址也是正确的,通过F12 查看元素样式,发现字体类已经生效,于是我打开本地的浏览器再看,发现在本地浏览器下,自定的图标库是可以显示的,但是在 HBuildx内置浏览器下不显示;
这就怪了…
于是我就不再使用我们自己的iconfont字体,而是按照官方的步骤,从添加icon开始,到自己创建项目,一步一步,一步一步…最终引入到项目中去,竟然发现,在内置浏览器下是可以正常显示的;
经过这次的引入,我从中发现了蛛丝马迹,经过我比对两个项目的项目设置,发现我们正式项目的字体库的这是中勾选了彩色这一项,于是我就把彩色项的勾选去掉,再次尝试引入…
结果果然没让人失望,icon字体图标能够正常在 HBuildx内置浏览器中显示了… 设置如下图:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值