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

最新推荐文章于 2025-07-01 17:52:55 发布
原创 最新推荐文章于 2025-07-01 17:52:55 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app

博客指出在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，因为会被覆盖，因此得设置高层级

uniapp uni-icons组件自定义图标
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
09-02 3085
uniapp-uni-icons组件自定义图标，使用uni-icons增加自定义图标 1.1 准备图标 这里我使用的是阿里图标库,找到项目所需图标后,下载下来备用(可以是svg、ttf、img等等)
从入门到实战：全面解析 uni-app 跨平台开发（2025 版）
2403_83676243的博客
05-06 2147
uni-app 凭借其高效的开发模式、强大的生态系统和卓越的性能表现，已成为跨平台开发的首选框架。随着鸿蒙、小程序等新平台的崛起，uni-app 在 2025 年将进一步深化多端适配，推出更智能的开发工具和性能优化方案。无论是初创团队还是企业级项目，uni-app 都能为您提供一站式的跨平台解决方案。立即行动：访问uni-app 官网，下载 HBuilderX，开启您的跨平台开发之旅！🚀。
uniapp 页面字体乱码问题解决【已解决】
Leijiang0504的博客
07-16 1979
非常简单 ，如果你选择了之后重新渲染页面还是乱码的话，你就把项目关掉，重新启动就OK了。这个不是我们本身代码的问题，调整一下编译器就好了。2,然后以指定编码重新打开，选择utf-8就行了。
uni-App出现乱码
文龙刚的博客
03-24 1844
最近在写uni-App项目时，突然乱码了 包括console打印也出现了乱码 解决方法如下：设置你想要的编码格式即可
uniapp真机调试，iconfont图标显示异常（在线使用）
A_Brave的博客
08-25 3315
最近用uniapp做项目，真机调试遇到阿里妈妈字体图标显示异常，查看文档发现是路径问题，app端和后端协议不一样，具体操作如下： 问题截图： 生成的在线图标： uni官方文档： 更改之后添加https前缀： 之后就能正常显示了： ...
使用uni-app引入阿里巴巴矢量图以及出现小长方形解决方法
NanChen的博客
11-29 1912
首先就是下载阿里巴巴矢量图，不知道怎么用的可以去看一下这篇文章webpack打包font文字目录下的06篇 如果是在pages.json文件下引入图标可以使用第一种（Unicode）引入 引入时需要把前面的&#x给去掉，换成u 比如： 如果是写在vue里的字体，可以用第二种方式 样式是在iconfont.css中查找对应样式 直接这样写完是没有效果的，一般效果中会出现小长方形，因为没有引入路径，这时，建议大家引入在线的路径并加上https:即可 打开iconfont.cs.
记一下uniapp打包之后的乱码问题
b734775358的博客
07-21 1252
在HBuilder X里面运行是正常的，但是打包之后uniapp自带的组件的按钮部分（uni.showModal和picker都发现这个问题）的汉字会变成乱码，所以记录一下目前解决的办法。2、uni.showModal的情况，不知道为什么修改样式没有生效，所以直接在定义的时候把按钮的文本改成unicode编码,顺便把修改uni.showModal样式的方法贴上。1、修改样式，隐藏原来的文本内容，用伪类来显示文字，一般直接放在APP.vue里面，要注意的是伪类里面的字要换成unicode编码。
解决uniapp App端iconfont图标显示异常问题
我的博客
04-14 2633
原来的iconfont.css： @font-face { font-family: "iconfont"; /* Project id 2762712 */ src: url('iconfont.woff2?t=1631523743638') format('woff2'), url('iconfont.woff?t=1631523743638') format('woff'), url('iconfont.ttf?t=1631523743638') format(
uniapp-011-使用uni-icons实现字体图标
浪漫韫秋
02-15 791
导入插件之后，是在components目录下面的uni-icons。如上图所示，这样的话，我们直接就可以引入这个图标了。组件预览当中有，各种图标的名字，就是type。字体图标一个一个找，很麻烦的。我们直接使用uniapp插件。如上图所示，这就是导入成功了。这就是设置后的效果。
精选资源
uni-app小程序简单聊天.rar
12-15
- 使用uni-app的`<van-list>`组件实现滚动加载历史消息，`<uni-icons>`用于图标展示，`<uni-input>`处理用户输入。 - 数据管理方面，可以利用uni-app的Vuex状态管理，存储和同步聊天记录。 - 通信机制，可以借助...
精选资源
uni-icons.zip
01-05
首先，uni-icons是uni-app生态系统的一部分，它包含了大量的预定义图标，涵盖了常用的操作提示、导航、状态等场景，如设置、搜索、加减号、信息提示等。这些图标设计简洁、统一，符合现代移动应用的审美趋势，能够...
uniapp-部分文件中文乱码
Anorry的博客
08-17 1670
在开发时遇到，部分页面的中文显示乱码，如图。页面的编码格式不是 utf-8 造成的。搜索了一下解决方法，这里记录一下。
uni-app编译后乱码或项目在HBuilder X中出现提示中文附近有编码错误
qq_23859799的博客
09-09 3631
uni-app编译后乱码或项目在HBuilder X中出现提示中文附近有编码错误解决办法
uni-app引入iconfont报错..
weixin_42967392的博客
04-10 710
这两天在做uni-app项目，引入iconfont时出现了如下错误。 解决办法： 1. 打开这个网站 2. 点击网站中的选择文件，找到字体图标下载的文件。3.点击SELECT ALL，复制该网页文本框里的内容。 4.打开上图中的iconfont.css文件，将里面的@font-face替换为以下代码，并粘贴刚刚复制的内容。 @font-face { font-family: "iconfon...
uniapp项目tabbar使用icon font(图标字体)时真机显示异常问题
最新发布
urnotuname的博客
07-01 755
注：我这项目用icomoon，并且资源目录比较长，不用参考我的资源路径配置。
解决uni-app开发的view页面中的文本乱码问题
︶￣城南花已开
03-21 3735
解决uni-app开发的view页面中的文本乱码问题
把uniapp打包成exe出现的页面样式的混乱的问题
hcy5201314521的博客
12-19 631
在桌面应用里，因为未知的原因uniapp计算出来的字体大小比在你的浏览器里大一倍。注意：之后设计的时候把高度建议稍微小一点，给标题和菜单栏留一些空间。接下来你需要查的就是，uniapp是基于什么来计算这个尺寸的。在代码中，这个查询字体是设置的什么大小?
uni-app打包后iconfont无法显示解决办法
weixin_45932157的博客
07-02 1650
在cdn前面加上 https: 即可:
uniapp 编译后文字乱码的解决方案
weixin_45650243的博客
08-11 5083
解决uniapp编译后中文展示乱码问题
uni-app fontawesome图标不显示
06-05
### 解决方案 在 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、付费专栏及课程。

余额充值