效果如下:

导航栏使用uni-icons 图标
步骤:
1、 下载uni-icons插件
方式一:找到uni-icons组件:扩展组件uni-ui -》 uni-icons 点击下载或安装,点击使用HBuder 导入插件,输入hbuhuier账号密码,即可下载到项目uni_modules 目录下

方式二:直接下载包拷贝到指定目录
复制uniicons.ttf文件,放在static目录下。
2、配置页面,
该配置在page.json里,在此页面下配置,记得加 \u
打开pages.json页面,进行如下配置。 fontSrc 填写static下的uniicons.ttf地址,注意写准确。 text 填写图标的名字。

配置页面
3、找到想要的图标
打开官网找到想要的图标,例如:upload,再找到刚下载的插件,找icons.js。

打开icon.js,搜索刚刚看到的图标名字:,需要的是unicode,然后在页面配置的"text"中写成"\ue68e"这样的格式。注意要写\u

4、绑定事件
在配置的页面vue文件中添加如下代码:如图所示,该事件与onshow、onready、method等同级。
