uniapp真机调试,iconfont图标显示异常(在线使用)

您所在的位置:网站首页 安卓手机字体大小怎么调试 uniapp真机调试,iconfont图标显示异常(在线使用)

uniapp真机调试,iconfont图标显示异常(在线使用)

2024-07-14 01:51| 来源: 网络整理| 查看: 265

最近用uniapp做项目,真机调试遇到阿里妈妈字体图标显示异常,查看文档发现是路径问题,app端和后端协议不一样,具体操作如下:

问题截图:

在这里插入图片描述

生成的在线图标:

在这里插入图片描述

uni官方文档:

在这里插入图片描述

更改之后添加https前缀:

在这里插入图片描述

之后就能正常显示了:

在这里插入图片描述

在项目中使用

有朋友遇到的可能不是https的问题,这里补充一下在uniapp中如何引入使用:

1.在我的项目中复制生成的在线Unicode代码(没有的点击在线生成) 在这里插入图片描述 2. 把复制的代码粘贴在style标签下,(推荐单独创建一个css文件,在需要的地方引入)

在这里插入图片描述 在这里插入图片描述

注意: 粘贴过Unicode之后,需要定义一下当前的iconfont样式,加上以下代码即可,否则会显示异常如下图:

.iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

模拟器: 在这里插入图片描述 浏览器: 在这里插入图片描述 3.之后运行就可以了 在这里插入图片描述



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3