如何在uniappx中使用iconfont

分类：uni-app x

iconfont

有没有demo?比如如何导入项目、引用？使用？我想在页面中和tabBar中使用，但好像没有具体的代码

2026-01-05 14:55 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

该问题请在专业群（ uni-app x技术交流群）咨询，群中有相关专业的管理员和群友。

在 uni-app x 中使用 iconfont 的步骤如下：

导入字体文件：
将 iconfont 字体文件（如 .otf 或 .ttf）放入 static 目录

定义 CSS 字体：

@font-face {  
font-family: "iconfont";  
src: url('@/static/iconfont.otf');  
}  
.iconfont {  
font-family: "iconfont" !important;  
}

页面中使用：

<view class="iconfont" style="font-size: 40rpx; color: #333;">&#xe64e;</view>

tabBar 中使用：
在 pages.json 中配置：

"tabBar": {  
"list": [{  
"pagePath": "pages/index/index",  
"text": "首页",  
"iconfont": {  
  "text": "&#xe64e;",  
  "fontSize": "24px",  
  "color": "#7A7E83",  
  "selectedColor": "#007AFF"  
}  
}]  
}

注意事项：

Android 仅支持 ttf/otf 格式
iOS 支持更多格式但需确保 font-family 名称唯一
确保 HBuilderX 版本 ≥ 4.81（查看更新日志）
如果 Android 不显示，参考 ISSUE#19213 检查路径是否正确

更多细节可查阅字体设置文档

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

如何在uniappx中使用iconfont

1 个回复

公告

相关问题

如何在uniappx中使用iconfont

与内容相关的链接

1 个回复

公告

相关问题