自定義圖標選項卡Ionic 3

Question

我正在嘗試為離子選項卡應用自定義圖標，但它僅顯示不活動的選項卡圖標，單擊另一個選項卡時不顯示任何內容

tabs.scss文件

.tabs{
  a[aria-selected=false]{
    .ion-md-tab1 {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab1.png") !important; }
    }
.ion-md-tab2 {
          max-width: 26px !important;
          content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
        }
  a[aria-selected=true]{
    .tabs-md-tab1 {
      max-width: 26px !important;
      content: url("../assets/imgs/active-tab1.png") !important;
    }
     .ion-md-tab2 {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
  }
}

tabs.html

<ion-tabs>
  <ion-tab [root]="tab1Root" tabIcon="tab1"></ion-tab>
  <ion-tab [root]="tab2Root" tabIcon="tab2"></ion-tab>
</ion-tabs>

Answer 1

如果您需要在應用中使用自定義圖標，那么以下解決方案對我非常有用。

1. 將您的.svg圖標文件放入：

   / src / assets / icons / ...

2. 在您的app.scss文件中，添加以下scss代碼：

    ion-icon { &[class*="prefix-"] { mask-size: contain; mask-position: 50% 50%; mask-repeat: no-repeat; background: currentColor; width: 1em; height: 1em; } // custom icons &[class*="prefix-categories"] { mask-image: url(../assets/icon/ic_categories.svg); } &[class*="prefix-menu"] { mask-image: url(../assets/icon/ic_menu.svg); } } 

3. 並在您的html標簽代碼上

    <ion-tabs> <ion-tab [root]="tab1Root" tabTitle="Title" tabIcon="prefix-name"></ion-tab> </ion-tabs> 

Answer 2

.tabs{
    .ion-md-tab1[ng-reflect-is-active="true"] {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab1.png") !important; }
    .ion-md-tab2[ng-reflect-is-active="true"] {
          max-width: 26px !important;
          content: url("../assets/imgs/inactive-tab2.png") !important;}
    .tabs-md-tab1[ng-reflect-is-active="false"] {
      max-width: 26px !important;
      content: url("../assets/imgs/active-tab1.png") !important;
    }
     .ion-md-tab2[ng-reflect-is-active="false"] {
      max-width: 26px !important;
      content: url("../assets/imgs/inactive-tab2.png") !important; 
     }
}

Answer 3

ng-reflect-is-active="true"在生產版本中不起作用，請使用此功能； 這對我來說可以：

.tabs {
    a[aria-selected=true] {
      .ion-md-tab1 {
        max-width: 26px !important;
        background: url("../assets/imgs/svg/ic_home_active.svg") no-repeat 50% 50%;
      }
    }
  }