ionic3-活動選項卡從文本更改為圖標

Question

這是我的選項卡的屏幕截圖，ios和android版本。 我想要最后一個選項卡(tab4Root)當我單擊它時，將其更改為icon cart 。

tabs.html

<ion-tabs color="danger">
  <ion-tab [root]="tab1Root" tabTitle="新聞" tabIcon="ios-globe-outline"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="SOS" tabIcon="call"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="服務" tabIcon="people"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="唐人街"></ion-tab>
</ion-tabs>

tabs.ts

import { Component } from '@angular/core';

import { NewsPage } from '../news/news';
import { SosPage } from '../sos/sos';
import { ServicesPage } from '../services/services';
import { ShopPage } from '../shop/shop';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = NewsPage;
  tab2Root: any = SosPage;
  tab3Root: any = ServicesPage;
  tab4Root: any = ShopPage;

  constructor() {

  }
}

Answer 1

嘗試這個 ：

<ion-tabs color="danger">
<ion-tab [root]="tab1Root" tabTitle="新聞" tabIcon="ios-globe-outline"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="SOS" tabIcon="call"></ion-tab>
<ion-tab [root]="tab3Root" tabTitle="服務" tabIcon="people"></ion-tab>
<ion-tab [root]="tab4Root" tabTitle="唐人街" tabIcon="cart"></ion-tab>
</ion-tabs>