uni-app uni-icons显示乱码问题

博客指出在uni-app里存在font-family样式覆盖uni-icons样式的问题,导致引用图标显示为方框无法正常显示。解决方法是重新定义uni-icons的font-family,并设置高层级样式,以避免被覆盖。

uni-app uni-icons显示乱码问题

主要问题是font-family

一、如图1.1、1.1,1.2所示
1.1

图1.2
图1.3
图1.1中引用图图标为location-filled,settings;但是在图中显示为方框,无法正常显示。
图1.3中是当前的属性定义字体样式为font-family
原因是因为当前样式font-family覆盖uni-icons的样式
二、解决方法
将uni-icons重新定义fongt-family,如图1.4所示
图1.4
在样式中重新定义uni-icons,因为会被覆盖,因此得设置高层级

### 解决方案 在 Uni-app 中使用 FontAwesome 图标时,如果图标不显示,可能是由于以下几个常见原因导致的。以下是详细的排查和解决方案: #### 1. 确保 `fontSrc` 路径正确 FontAwesome 图标的字体文件路径需要准确无误。如果路径错误或文件未正确加载,则图标将无法正常显示。根据提供的 `page.json` 配置[^1],需要确保 `/static/fontawesome-webfont.ttf` 文件已正确放置在项目目录中,并且路径与配置一致。 ```json { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app", "app-plus": { "bounce": "vertical", "titleNView": { "titleAlign": "left", "subtitleText": "uni-app.com", "buttons": [ { "text": "\uf061", "fontSrc": "/static/fontawesome-webfont.ttf", "fontSize": "22px", "color": "#FFFFFF" }, { "text": "\uf062", "fontSrc": "/static/fontawesome-webfont.ttf", "fontSize": "22px", "color": "#FFFFFF" } ] } } } } ``` 若路径错误,可以尝试调整为相对路径或绝对路径,例如:`"/static/fonts/fontawesome-webfont.ttf"`。 #### 2. 检查 `text` 属性是否为正确的 Unicode 字符 FontAwesome 图标通过 Unicode 字符来表示不同的图标。例如,`\uf061` 表示一个特定图标。如果 `text` 属性值错误,则图标不会显示。请参考官方文档确认所需的 Unicode 值[^1]。 #### 3. 使用 `uni-icons` 插件替代手动配置 Uni-app 提供了内置的 `uni-icons` 组件[^2],支持直接使用 FontAwesome 图标库,而无需手动配置 `fontSrc`。以下是一个示例代码: ```html <template> <view> <uni-icons type="home" size="22" color="#FFFFFF"></uni-icons> <uni-icons type="search" size="22" color="#FFFFFF"></uni-icons> </view> </template> <script> import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue'; export default { components: { uniIcons } }; </script> ``` 通过这种方式,可以避免手动配置字体文件路径的问题,同时简化开发流程。 #### 4. 检查平台兼容性 某些平台上可能对自定义字体的支持有限,特别是 Android 和 iOS 的低版本设备。如果遇到兼容性问题,可以尝试以下方法: - 确保项目中引入的字体文件格式兼容目标平台。 - 在 `manifest.json` 中配置 `app-plus` 的 `fonts` 属性,显式声明使用的字体文件。 ```json { "app-plus": { "fonts": [ { "family": "FontAwesome", "source": "/static/fontawesome-webfont.ttf" } ] } } ``` #### 5. 清理缓存并重新编译 有时,字体文件可能未正确加载到应用中,导致图标不显示。可以通过清理缓存并重新编译项目来解决此问题。具体步骤如下: - 删除 `dist` 或 `build` 目录中的旧构建文件。 - 清理 HBuilderX 缓存(工具栏 -> 设置 -> 清理缓存)。 - 重新编译项目并运行。 --- ### 注意事项 - 如果仍然无法解决问题,请检查控制台日志,查看是否存在字体加载失败或其他相关错误信息。 - 确保项目的静态资源(如字体文件)已正确打包到最终生成的应用中。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值