能,但仅限 App(3.4.4+)和 H5(3.5.3+)平台;微信/支付宝等小程序端原生导航栏不支持 iconfont,属硬性限制——其 tabBar 和 titleNView 机制不解析字体文件,fontSrc 字段在 mp-weixin 构建时被忽略。

这是个硬性限制,不是配置问题——小程序原生 tabBar 和 titleNView 的按钮机制压根不解析字体文件,fontSrc 字段在 mp-weixin 构建时会被忽略,强行写进去也不会生效。
page.json 中配置 titleNView 按钮用 iconfont
App 和 H5 端可用,核心是三个字段:text(Unicode 编码)、fontSrc(字体路径)、fontSize(必须显式设,否则可能极小或不显示):
"app-plus": {
"titleNView": {
"buttons": [
{
"float": "left",
"fontSrc": "/static/iconfont.ttf",
"text": "\ue605",
"fontSize": "22px"
}
]
}
}
注意:text 必须是双反斜杠开头的字符串 "\ue605"(JSON 字符串转义后实际为 ue605),不能写成 "ue605"(JS 解析会报错)或 ""(HTML 实体,不识别)。
-
fontSrc路径必须以/static/开头,且文件真实存在于unpackage/dist/build/app-plus/static/或对应输出目录中 - 字体文件推荐保留
.ttf(App 兼容最稳)和.woff2(H5 更小),但fontSrc只能指定一个,优先选.ttf - 图标 Unicode 值必须从 iconfont 项目下载包里的
demo_index.html页面中“Unicode”列复制,别抄 CSS 类名或 Symbol 值
tabBar 使用 iconfont 需要全局声明 iconfontSrc
App/H5 端启用 iconfont 属性前,必须先在 pages.json 根级配置 tabBar.iconfontSrc,否则 list 项里的 iconfont 字段无效:
"tabBar": {
"iconfontSrc": "/static/iconfont.ttf",
"list": [{
"pagePath": "pages/index/index",
"iconfont": {
"text": "\ue601",
"color": "#666",
"selectedText": "\ue602",
"selectedColor": "#007aff"
},
"text": "首页"
}]
}
-
iconfontSrc是 tabBar 级别配置,只写一次;iconfont是每个 tab 项自己的配置 -
iconfont.text和iconfont.selectedText必须是不同 Unicode(即两个不同图标),否则选中态无变化 - 一旦配置了
iconfont,该 tab 项的iconPath和selectedIconPath就被完全忽略
小程序端无法使用原生导航栏 iconfont 的替代方案
微信/支付宝等小程序不支持 fontSrc,也不能在 tabBar 或 navigationStyle: custom 的原生导航栏里加载字体。你只有两个选择:
- 降级用图片:保持
iconPath/selectedIconPath,按规范提供 2x/3x 图标,接受体积和适配成本 - 改用自定义导航栏(
navigationStyle: custom):自己用<view class="iconfont icon-search"></view>渲染图标,此时走的是页面 DOM,可正常引入iconfont.css+.woff2,但需手动实现返回、标题居中、状态栏适配等逻辑
特别注意:app-plus 和 mp-weixin 的配置不能混写在同一处,必须用条件编译(如 #ifdef APP-PLUS)隔离,否则 H5 端可能因无效字段报 warning,小程序端构建失败。
font-family 名称冲突是常见隐形坑
如果你在 App.vue 里用 @import 引入了 iconfont.css,又同时在 titleNView.buttons 里用 fontSrc,两者字体名必须一致,且不能叫 iconfont —— 这是 uni-app 内部保留字,会导致图标显示为方块或空白。
- 修改
iconfont.css中的@font-face { font-family: "iconfont"; }为font-family: "my-iconfont"; - 同时在
titleNView.buttons的fontSrc后追加fontFamily: "my-iconfont"(uni-app 3.5.0+ 支持该字段) - 否则即使路径对、编码对,图标仍不显示
这个冲突在 H5 端不一定暴露,但在 iOS App 上几乎必现,而且错误没有任何日志提示,只能靠排查字体名是否被覆盖。


















