ionic3 tab实现自定义图片替换字体图标

Ionic 自带的图标库固然提供了一系列的字体图标文件供开发者使用，但有时候不一定就能找到开发者想要的图标，而美工又设计出看起来漂亮的tab图标，那么这个时候就需要开发者想方设法的做到美工想要看到的效果了，找了N多资料，终于亲身试验过，可以使用自定义的图片来替换图标的方法，总结一下备忘。上代码：

<ion-tabs name="home">
  <ion-tab [root]="tab1Root" tabUrlPath="a" tabTitle="tab1" tabIcon="tab-tab1"></ion-tab>
  <ion-tab [root]="tab2Root" tabUrlPath="b" tabTitle="tab2" tabIcon="tab-tab2"></ion-tab>
  <ion-tab [root]="tab3Root" tabUrlPath="c" tabTitle="tab3" tabIcon="tab-tab3"></ion-tab>
  <ion-tab [root]="tab4Root" tabUrlPath="d" tabTitle="tab4" tabIcon="tab-tab4"></ion-tab>
  <ion-tab [root]="tab5Root" tabUrlPath="e" tabTitle="tab5" tabIcon="tab-tab5"></ion-tab>
</ion-tabs>

在app.scss中添加：

.ion-tab-icon-base {  
  width: 20px;  
  height: 20px;  
  padding: 0px 1px 1px;  
}  
  
.ion-tab-icon-md-base {  
  width: 25px;
  min-width: 25px !important;  
  height: 25px;
}  
  
$tabImageName: 'tab1' 'tab2' 'tab3' 'tab4' 'tab5';  
@for $i from 1 to 6 {  
  //for ios  
  .ion-ios-tab-#{nth($tabImageName, $i)} {  
    @extend .ion-tab-icon-base;
    content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}_choosed.png");
  }  
  .ion-ios-tab-#{nth($tabImageName, $i)}-outline {  
    @extend .ion-tab-icon-base;
    content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}.png");  
  }  
  
  // for android  
  .tabs-md .tab-button[aria-selected=true] {  
    .ion-md-tab-#{nth($tabImageName, $i)} {  
      @if $i == 1 {
        width: 23px;
        min-width: 23px !important;  
        height: 23px;
      } @else if $i == 2{
        width: 25px;
        min-width: 25px !important;  
        height: 20px;
        padding: 2px 1px 1px;
      } @else {
        @extend .ion-tab-icon-md-base;  
      }
      content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}_choosed.png");  
    }  
  }  
  .tabs-md .tab-button[aria-selected=false] {  
    .ion-md-tab-#{nth($tabImageName, $i)} {
      @if $i == 1 {
        width: 24px;
        min-width: 24px !important;  
        height: 24px;
      } @else if $i == 2{
        width: 25px;
        min-width: 25px !important;  
        height: 18px;
      } @else if $i == 3{
        width: 22px;
        min-width: 22px !important;  
        height: 25px;
      } @else {
        @extend .ion-tab-icon-md-base;  
      }
      content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}.png");  
    }  
  }  
}

好了，完成以上代码后保存一下，然后启动服务看看吧，现在应该已经换成美工设计的图片图标了