关于ionic3 tabbar 图片替换icon

.tabs-ios .tab-button-icon{

  min-width: 22px;

  height: 22px;

}

.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/icon_#{nth($tabImageName, $i)}[email protected]");

    }

    .ion-ios-tab-#{nth($tabImageName, $i)}-outline { 

      @extend .ion-tab-icon-base;

      content: url("../assets/icon/tabs/icon_#{nth($tabImageName, $i)}@2x.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/icon_#{nth($tabImageName, $i)}[email protected]"); 

      } 

    } 

    .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/icon_#{nth($tabImageName, $i)}@2x.png"); 

      } 

    } 

  }

上面是本人写的代码,下面是截图为了他人看的明白!

html中 要把tab前缀加上    

assets/icon/tabs/....  这是图片的路径

因为第一次写文章,写的有点乱,见谅!!!

这就完成了。如有问题,欢迎互相学习QQ1162172981

你可能感兴趣的:(关于ionic3 tabbar 图片替换icon)