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使用之前自定義的全局圖標