javascript - ionic 2 : Use picture in tab button

Question

我在我的应用程序中使用 ionic 标签，我想在标签按钮中使用图片。我想动态设置这张图片。

就我而言，我有一个链接了不同用户的帐户。我想根据所选用户更改我的标签图片。

我有这个:

我想要这个:

我的标签中的代码:

    <ion-tabs tabsHighlight="false">
      <ion-tab [root]="HomePage" 
               tabsHideOnSubPages="true"
               tabIcon="checkbox"
               tabTitle="A faire"
               tabBadge="5"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="ToComePage"
               tabsHideOnSubPages="true"
               tabIcon="time" tabTitle="A venir"
               tabBadge="0"
               tabBadgeStyle="notif">
      </ion-tab>
      <ion-tab [root]="HistoricPage"
               tabsHideOnSubPages="true"
               tabIcon="book"
               tabTitle="Historique">
      </ion-tab>
      <ion-tab [root]="MenuPage"
               tabsHideOnSubPages="true"
//I want to delete this tab Icon and replace it by a picture.
               tabIcon="menu"
               tabTitle="Menu">
      </ion-tab>
    </ion-tabs>

我不知道该怎么做，一个想法？

Answer 1

给tabIcon自定义名称，比如

<ion-tab [root]="MenuPage"
       tabsHideOnSubPages="true"
       tabIcon="customicon"
       tabTitle="Menu">
</ion-tab>

在 CSS 中:

.ion-ios-customicon-outline,
.ion-ios-customicon,.ion-md-customicon,.ion-md-customicon-outline {
  content: url('imageurl');
}

plunk