uni-app中为什么在Uniapp x 项目使用uni-icons真机调试时ios上图标显示为问号

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app中为什么在Uniapp x 项目使用uni-icons真机调试时ios上图标显示为问号
为什么我在Uniapp x 项目中使用这个uni-icons 真机调试的时候 ios上面这些图标都是显示一个问号啊

Harmonyos Next教程
3 回复

插件是什么版本的 ？最新版本也有这个问题吗 ？


解决方法： 导出ttf资源时，修改ICONFONT项目（没有就先创建）：“更多操作”-》“编辑项目”，将“Font Family”改成非“iconfont”的值，再导出。

在 Uniapp 中使用 uni-icons 时，如果在 iOS 真机上图标显示为问号，这通常是由于图标字体没有正确加载或者图标字体文件与 iOS 设备不兼容导致的。以下是一些可能的解决方法和相关的代码案例，帮助你定位和解决这个问题。

1. 确认图标字体文件是否正确引入

首先，确保你的项目中已经正确引入了 uni-icons 的字体文件。通常，这些文件会放在项目的 static 目录下，并在 App.vue 或 main.js 中进行全局引入。

// main.js 或 App.vue
import '@dcloudio/uni-ui/lib/uni-icons/uni-icons.css';

2. 检查字体文件的路径和格式

确保字体文件的路径正确无误，并且格式是 iOS 支持的。iOS 通常支持 .ttf 和 .otf 格式的字体文件。

3. 使用 CSS @font-face 规则

如果直接引入 uni-icons 的 CSS 文件无效，你可以尝试使用 CSS 的 [@font-face](/user/font-face) 规则手动加载字体文件。

[@font-face](/user/font-face) {
    font-family: 'uni-icons';
    src: url('/static/fonts/uni-icons.ttf') format('truetype');
}

.icon {
    font-family: 'uni-icons';
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    /* 其他样式 */
}

.icon-home:before {
    content: "\e600";
}

4. 检查图标类名是否正确

确保你使用的图标类名与 uni-icons 文档中提供的一致。如果类名有误，也会导致图标显示异常。

<template>
    <view>
        <text class="icon icon-home"></text>
    </view>
</template>

5. 清除缓存和重新编译

有时候，开发工具的缓存或者编译问题也可能导致图标显示异常。尝试清除开发工具的缓存，并重新编译项目。

6. 检查 iOS 系统版本

确保你的 iOS 设备系统版本不是过旧的，因为过旧的系统版本可能不支持某些新的字体格式或特性。

通过以上步骤，你应该能够定位并解决在 Uniapp 项目中使用 uni-icons 在 iOS 真机上图标显示为问号的问题。如果问题依旧存在，可能需要检查 uni-icons 库本身是否有已知的兼容性问题，或者考虑使用其他图标库。

回到顶部