ionic4 自定义tabbar图标

  
    
      
      首页
    

    
      
      订单
    

    
      
      信息
    

    
      
      我的
    
  

2. 在global.scss里面写入样式，

.ion-page {
  .tabbar {
    .ion-tab-base {
      width: 1.5rem;
      height: 1.5rem;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }
    $tabImageName: "home" "order" "notice" "user";
    @for $i from 1 to 5 {
      //for all platform
      .tab-button .icon-#{nth($tabImageName, $i)} {
        @extend .ion-tab-base;
        background-image: url("./assets/img/tabbar/#{nth($tabImageName, $i)}.png");
      }
      .tab-button.tab-selected .icon-#{nth($tabImageName, $i)} {
        @extend .ion-tab-base;
        background-image: url("./assets/img/tabbar/#{nth($tabImageName, $i)}_active.png");
      }
    }
  }
}

注意：利用scss的循环和函数，可避免重复写样式，图片路径要写正确，根据自己习惯命名。