uniapp小程序自定义底部tabbar使用字体图标

uni-app的小程序中，自定义底部 tabBar 使用字体图标的步骤如下：

1. 首先，你需要准备一些常用的字体图标库，如 `@ant-design/icons` 或者 `font-awesome`。可以在项目中通过 npm 安装它们：

   npm install @ant-design/icons --save

2. 在 `uni-app` 的配置文件 `config.json` 中，允许加载字体图标：

   {
     "uniApp": {
       "globalProperties": {
         "atlasPath": "./static/iconfont/atlas"
       }
     },
     // ... 其他配置
   }

确保路径指向包含字体图标 SVG 文件的目录。

3. 在项目的 `pages` 目录下创建一个新的页面，比如 `custom-tabbar.vue`，然后在该文件中引入需要的字体图标组件，并将其添加到 tabBar 上：

   <template>
     <view class="custom-tabbar">
       <navigator tabBar="custom" :options="{ customIconPaths: { '首页': './iconfont/icon-home.svg', '其他页': './iconfont/icon-other.svg' } }">
         <!-- 更换导航跳转的组件 -->
         <navigator-view url="/index"></navigator-view>
         <navigator-view url="/otherPage"></navigator-view>
       </navigator>
     </view>
   </template>

   <style scoped>
     .custom-tabbar {
       /* 根据需求定制样式 */
     }
   </style>

这里 `customIconPaths` 属性用于设置每个标签的字体图标路径。

4. 对于每个页面，你可以在对应的 `.vue` 文件中替换默认的 tabBar 标签，并使用图标名称作为标签文字。