Ionic 3自定义Tab图标问题：仅显示未激活状态图标

我来帮你排查这个问题！从你提供的代码来看，主要是CSS选择器错误和样式结构不规范导致激活状态的图标无法显示，咱们一步步来修正：

问题分析 #

1. 选择器不匹配：激活状态里你使用了.tabs-md-tab1，但实际Ionic根据tabIcon="tab1"生成的类名是.ion-md-tab1，两者不匹配导致样式失效。
2. CSS结构错误：你把激活状态的选择器a[aria-selected=true]放在了.tabs容器外，而且存在多余的闭合大括号，导致样式没有正确作用到标签元素上。
3. 样式作用范围问题：未激活状态的.ion-md-tab2样式没有嵌套到a[aria-selected=false]内，会导致所有状态下tab2都显示未激活图标。

修正后的代码 #

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] {
    .ion-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>

关键修正点说明 #

• 把激活/未激活状态的选择器都嵌套到.tabs容器内，确保样式能正确命中标签元素。
• 统一使用.ion-md-tab1/.ion-md-tab2作为图标类选择器，和tabIcon属性值严格对应。
• 将未激活状态的tab2样式移入a[aria-selected=false]内，避免干扰激活状态的样式逻辑。

这样修改后，切换标签页时就能正常显示激活和未激活状态的自定义图标啦！

内容的提问来源于stack exchange，提问作者Shiv Gaurav