首先，我们先来看下官方对于自定义导航按钮的配置表格动态修改导航栏按钮：

然后，字体图标一般是使用的iconfont。根据上图划线的地方，总结使用图标按钮的几个步骤。

https://www.iconfont.cn

1、搜索需要的素材然后添加到购物车

2，去购物车中把刚刚的素材添加进项目中

3，在我的项目中点下载到本地

4、将*.ttf的字体包放入uniapp下的static文件夹下

5、在需要自定义导航按钮的页面（eg：index页面）做如下配置。

其中"text": "\ue8af ",后四位在刚刚的字体文件夹下的json文件中可以找到

导航栏按钮.vue文件中动态修改：

onNavigationBarButtonTap(e) {//导航按钮点击事件

var pages = getCurrentPages();//所有页面对象

var page = pages[pages.length - 1];//当前页面对象

// #ifdef APP-PLUS

var currentWebview = page.$getAppWebview();//页面webview对象

currentWebview.setTitleNViewButtonStyle(e.index, {

                "text": '\ue8b0 ',

                "color":"red",

"fontSrc": "/static/fontscr/iconfont.ttf"

            });

// #endif

},

---