问题
uni-app中导航栏功能按钮只提供了一个text属性来设置按钮的显示文本,并未提供额外的设置图标的属性
"buttons": [{"text": "保持"}
]
官方文档
通过查阅官方文档发现,text属性支持使用字体图标
下载字体图标
那么什么是字体图标呢?
可以理解为可作为文本显示的图标,就像我们在微信聊天中插入的表情符号
那么哪里可以下载到字体图标呢?我们可以到iconfont-阿里巴巴矢量图标库下载字体图标
1.首先搜索找到自己想要的图标,然后点击添加入库加入购物车
2.然后在购物车中点击下载代码按钮
3.下载完解压,内容如下
iconfont.ttf就是字体文件,拷贝到项目的/static/iconfont目录下
4.双击打开demo_index.html文件,可以看到字体图标对应的Unicode,后面会用到
使用字体图标
通过fontSrc属性配置字库图标文件的路径
通过text属性配置字体图标的Unicode
需要注意的是我们上个步骤得到的字体图标的Unicode为,需要把前面的&#x替换成\u
配置代码如下所示
"titleNView": {"buttons": [{"text": "\ue625","fontSrc": "/static/iconfont/iconfont.ttf"}]
}