如何在Ionic中设置导航标签栏中的“搜索”图标？

rggaifut 于 2023-09-28 发布在 Ionic

关注(0)|答案(2)|浏览(113)

我正在做一个Ionic项目，我想在导航栏中设置“搜索”图标。以下是我迄今为止尝试过的：

<ion-tabs>
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home" [rootParams]="apiuser"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Search" tabIcon="ion-md-search" [rootParams]="apiuser"></ion-tab>
  <ion-tab [root]="tab5Root" tabTitle="Search" tabIcon="md-search" [rootParams]="apiuser"></ion-tab>
  <ion-tab [root]="tab6Root" tabTitle="Search" tabIcon="search" [rootParams]="apiuser"></ion-tab>
</ion-tabs>

结果：

我不知道为什么图标没有显示。
我尝试过为tabIcon属性使用各种图标名称，如"ion-md-search"、"md-search"和"search"，但它们似乎都不能正常工作。有人可以提供指导，如何正确设置我的离子应用程序的标签栏中的"search" icon？我的Ionic CLI版本是5.4.16，我使用的是Ionic Framework 3.9.4。我知道这是很旧的版本，但我不想更新它
我使用的版本：

Ionic:

   Ionic CLI          : 5.4.16 
   Ionic Framework    : ionic-angular 3.9.4-201903121725
   @ionic/app-scripts : 3.2.4

Cordova:

   Cordova CLI       : not installed
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 23 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   NodeJS : v14.18.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.15
   OS     : Windows 10

ionic-framework

来源：https://stackoverflow.com/questions/77043523/how-to-set-search-icon-in-the-navigation-tab-bar-in-ionic

2条答案

按热度按时间

gpfsuwkq1#

npm install ionicons
import { Ionicons } from 'ionicons/icons';

<ion-tabs>
  <ion-tab [root]="tab3Root" tabTitle="Search">
    <ion-icon name="search"></ion-icon>
  </ion-tab>
  <!-- Other tabs -->
</ion-tabs>

赞(0）回复(0）举报 2023-09-28

bvn4nwqk2#

使用ion-tab-bar和ion-tab-button。比如这样：

<ion-tabs>
  <ion-tab-bar>
    <ion-tab-button tab="search">
      <ion-icon name="search"></ion-icon>
      <ion-label> Search </ion-label>
    </ion-tab-button>
     ....
  </ion-tab-bar>
</ion-tabs>

赞(0）回复(0）举报 2023-09-28

我来回答

如何在Ionic中设置导航标签栏中的“搜索”图标？

2条答案

相关问题

热门标签

最新问答