ionic2 tab使用自定義圖標

在ionic2中圖標是經過類添加的

好比說   tabIcon="homeImg"  

在頁面中研究能夠看到在ios上有兩個類是　.ion-ios-homeImg:before   和  .ion-ios-homeImg-outline

第一個是選中的狀態，第二個是未選中的狀態

在android上只有一個類　.ion-md-homeImg:before

選中未選中都是這一個

因此咱們就能夠在這個類上用黑科技(固然沒有homeImg這個圖標這是我自定義的)

 

在app.scss 中作一個全局的圖標 能夠在任意地方使用

.ion-ios-homeImg:before{
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background: no-repeat url('http://www.baidu.com/selection.png');
}

.ion-ios-homeImg-outline{
  content: ''; width: 30px; height: 30px; display: block; background: no-repeat url('http://www.baidu.com/unselection.png'); }

.ion-md-homeImg:before{
  content: ''; width: 30px; height: 30px; display: block; background: no-repeat url('http://www.baidu.com/selection.png'); }

這裏須要注意一點是selection.png必須使用網絡圖片，不可以識別本地圖片

  <ion-tab [root]="tab1Root" [tabsHideOnSubPages]="true" tabTitle="首頁" tabIcon="homeImg"></ion-tab>

效果：

 

至此自定義圖標完成若是要使用圖標就能夠直接使用homeImg使用以前自定義的全局圖標