uni-app x无法加载图标

操作步骤：

将vant图标库导入

预期结果：

显示vant图标

实际结果：

无法显示

bug描述：

无法加载vant的图标，官方示例是’\ue100’能加载出来，加载van图标库成功后，使用’\e660’无法加载，会报错error: Illegal escape: '\e’‌，使用e660不报错，但是也不对

<text class="font-size-20" style="font-family: vanIcon;">
  {{  
    font1  
  }}
</text>
uni.loadFontFace({
  global: true,
  family: 'vanIcon',
  source: "url('/static/font/vanIcon.woff')",
  success() {
    console.log('loadFontFace vanIcon.woff success')
  },
  fail(error) {
    console.warn('loadFontFace vanIcon.woff fail', error.errMsg)
  },
})

phonegap100 1楼•4 天前

官方没人回复吗

vueper 2楼•4 天前

麻烦提供下复现工程，这边排查下，谢谢

h691938207 3楼•4 天前

回复 DCloud_UNI_WZF: https://static.yetongge.top/uniapp-x-demo.zip

yuanlaile 4楼•4 天前

回复 DCloud_UNI_WZF: uview.ttf是uview UI组件的图标，vanIcon.woff是vant UI组件的图标，想在uniapp x中使用这些图标

sinazl 5楼•4 天前

回复小葛: uniapp-x android 平台，暂不支持 woff 字体文件，后续会优化逻辑触发 fail 回调返回错误信息，文档也会更新相关描述，感谢反馈，已加分

bupafengyu 6楼•4 天前

回复 DCloud_UNI_WZF: uview UI的图标好像也是ttf，也是不行的

phonegap100 7楼•4 天前

回复小葛: uview.ttf 我这测试正常，测试 demo

eggper 8楼•4 天前

在 uni-app x 中无法加载图标的问题可能由多种原因引起。以下是一些常见的解决方法：

1. 检查图标路径

确保你在代码中引用的图标路径是正确的。路径应该是相对于项目根目录的，并且图标文件确实存在于该路径下。

<image src="/static/icon.png"></image>

2. 图标文件格式

确保图标文件的格式是支持的格式，如 PNG、JPEG、SVG 等。不同的平台可能对图标格式有不同的支持。

3. 图标文件大小

如果图标文件过大，可能会导致加载失败。尝试压缩图标文件或使用较小的图标。

4. 平台差异

某些图标在某些平台上可能无法正常显示。例如，部分图标在微信小程序和H5中的表现可能不同。你可以通过条件编译来为不同平台加载不同的图标。

<!-- #ifdef H5 -->
<image src="/static/icon-h5.png"></image>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<image src="/static/icon-wechat.png"></image>
<!-- #endif -->

5. 网络问题

如果你的图标是从远程服务器加载的，确保网络连接正常，并且服务器可以正常访问。

6. 缓存问题

有时，浏览器或小程序平台的缓存可能会导致图标无法正常加载。尝试清除缓存或使用不同的设备进行测试。

7. 检查错误日志

查看控制台或日志输出，看看是否有任何错误信息。错误信息可能会提供有关图标加载失败的更多线索。

8. 使用 `uni-icons` 组件

如果你使用的是 uni-icons 组件，确保你已经正确安装并配置了该组件。

<uni-icons type="home" size="30"></uni-icons>

9. 重新编译项目

有时，项目在开发过程中可能会出现一些编译问题。尝试重新编译项目，看看是否能解决问题。

npm run dev

10. 检查 `manifest.json` 配置

确保 manifest.json 文件中没有错误的配置，尤其是与图标相关的配置。

{
  "app": {
    "icon": "/static/icon.png"
  }
}