Question

我正在尝试为离子标签应用自定义图标，但它只显示非活动标签图标，点击另一个标签时它没有显示任何内容

tabs.scss文件

Result:
special_number: 2

Explanation:
avg of first company would be 3
avg of second company would be 1

tabs.html

.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; 
     }
  }
}

Answer 1

如果您需要在应用中使用自定义图标，那么以下解决方案对我非常有用。

将.svg图标文件放入：

/ src / assets / icons /...

在您的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);
    }
}

并在此处的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%;
      }
    }
  }

自定义图标选项卡Ionic 3

3 个答案: