uniapp 导入阿里图标微信工具没有显示是怎么回事？

在uniapp项目中导入了阿里图标库的图标，但在微信开发者工具中却不显示，这是什么原因？已经确认图标文件路径正确，且在H5端可以正常显示，但一到微信小程序就不行了。有没有人遇到过类似问题？需要检查哪些配置？

htzhanglong 1楼

可能是以下原因：

字体文件路径错误，检查iconfont.css中的url路径。
未正确引入CSS文件，在App.vue中全局引入。
图标名称写错，检查类名是否与图标对应。
微信开发者工具缓存问题，清除缓存重启试试。

phonegap100 2楼

在UniApp中导入阿里图标后，在微信开发者工具中未显示，通常由以下原因及解决方案导致。请按顺序排查：

1. 字体文件路径问题

原因：UniApp在编译时，静态资源路径可能未正确解析。
解决：
- 将阿里图标下载的字体文件（如 .ttf、.woff）放在项目 static 目录下（例如 static/fonts/iconfont.ttf）。
- 在 App.vue 或页面的 <style> 中，使用绝对路径引入：
```
@font-face {
  font-family: 'iconfont';
  src: url('/static/fonts/iconfont.ttf') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
}
```
- 注意：路径前加 / 确保从根目录解析。

2. 微信开发者工具缓存

原因：旧缓存可能导致字体未更新。
解决：
- 清除微信开发者工具缓存：点击工具栏 “清缓存” → “全部清除”，然后重启工具。

3. 图标使用方式错误

原因：未正确应用图标类或编码。
解决：
- 在阿里图标项目中选择 Unicode 模式，复制图标代码（如 ）。
- 在页面中使用：
```
<text class="iconfont">&#xe601;</text>
```
- 确保类名 iconfont 与 CSS 中定义的保持一致。

4. 字体格式兼容性

原因：部分环境可能对字体格式支持有限。
解决：
- 下载时选择 TTF 或 WOFF 格式（微信小程序兼容较好）。
- 在 @font-face 中声明多种格式（如同时提供 .ttf 和 .woff）。

5. 作用域问题

原因：如果样式写在 Vue 单文件组件的 <style scoped> 中，可能影响字体生效。
解决：
- 将 @font-face 定义在全局（如 App.vue 的 <style> 中，不加 scoped）。

6. 检查控制台错误

打开微信开发者工具的 Console，查看是否有网络错误（如 404 字体加载失败）或 CSS 警告，根据提示调整路径或格式。

完成以上步骤后，重新编译并预览。如果问题持续，尝试在真机测试（微信开发者工具模拟器偶尔有渲染问题）。

回到顶部