ionic tabs 圖標變換

參考文檔：https://blog.csdn.net/qq993284758/article/details/78107412

其中tabs中的圖標不是font字體圖標，是本身公司設計師設計的。只要讓設計師把圖標設計成本身想要的大小便可

步驟：

1.在assets 中新建了一個tabsimg 的文件夾，專門放置tabs相關的圖標文件

2.在theme文件夾下新建一個ions.scss 文件 編寫tabs圖標的路徑

 

 3.將 icons.scss 導入variables.scss 文件中

最後

在tab.html 文件中的tabIcon屬性填寫上本身命名的圖標名字便可

 

 

 -------------------------------------------------------------------------------------此處是分割線----------------------------------------------------------------------------------------------------------

emmmmmmm....  第二種方式：（推薦）

參考地址：https://blog.csdn.net/xqq580231/article/details/78084718#

 html: 

 

 其中 tab5 是不大同樣的 

具體長這樣：

 

在app.scss 文件中編寫相關 css

變量：

 

 for 循環

ios:

android:

 

詳細代碼：

.ion-tab-icon-base {  
  width: 27px;  
  min-width: 27px !important;
  height: 27px !important; 
  padding: 0px 1px 1px;  
}  
  
.ion-tab-icon-md-base {  
  width: 27px;
  min-width: 27px !important;  
  height: 27px !important;  
}  
  
$tabImageName: 'tab1' 'tab2' 'tab3' 'tab4' 'tab5';  
@for $i from 1 to 6 {  
  //for ios  
  .ion-ios-tab-#{nth($tabImageName, $i)},
  .ion-ios-tab-#{nth($tabImageName, $i)}-outline{
    @if $i==5{
        position: fixed;
        bottom: 18px;
        width: 50px;
        height: 50px !important;
        & + span{
            margin-top: 35px !important;
            color: #101826 !important;
        }
    }  
     @extend .ion-tab-icon-base;
  }

  .ion-ios-tab-#{nth($tabImageName, $i)} {
    content: url("../assets/tabsimg/#{nth($tabImageName, $i)}.png");
  }  
  .ion-ios-tab-#{nth($tabImageName, $i)}-outline { 
    content: url("../assets/tabsimg/#{nth($tabImageName, $i)}_outline.png");  
  }

 
  
  // for android  
  .tabs-md .tab-button[aria-selected=true],.tabs-md .tab-button[aria-selected=false] {  
    .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: 25px;
            padding: 2px 1px 1px;
        } @else if $i == 5{
            position: fixed;
            bottom: 18px;
            width: 50px;
            height: 50px !important;
            & + span{
                margin-top: 35px !important;
                color: #101826 !important;
            }
        } @else {
            @extend .ion-tab-icon-md-base;  
        }
     }
   }

  .tabs-md .tab-button[aria-selected=true],{  
    .ion-md-tab-#{nth($tabImageName, $i)} {  
        content: url("../assets/tabsimg/#{nth($tabImageName, $i)}.png"); 
    }  
  }  

  .tabs-md .tab-button[aria-selected=false] {  
    .ion-md-tab-#{nth($tabImageName, $i)} {
        content: url("../assets/tabsimg/#{nth($tabImageName, $i)}_outline.png");  
    }  
  } 

 
}