ionic之自定義 ion-tabs 圖標

Ionic框架內置了很多矢量圖標，可以應用於 ion-tabs 多標簽切換中。
用法如下：

<ion-tabs class="tabs-positive tabs-icon-only">

  <ion-tab title="首頁" icon-on="ion-ios7-filing" icon-off="ion-ios7-filing-outline">
    <!-- 標簽 1 內容 -->
  </ion-tab>

  <ion-tab title="關於" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    <!-- 標簽 2 內容 -->
  </ion-tab>

  <ion-tab title="設置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    <!-- 標簽 3 內容 -->
  </ion-tab>

</ion-tabs>

 對應效果：

 

不美觀吧！ 有什么方法可以個性化tabs標簽圖標？ 譬如：

 

復雜方法可以搜“ionic自定義圖標”。

 

簡單方法是直接借用 ion-tab 模板，“icon-on” 以及“icon-off”用自定義的class代替ion-*圖標系列：

<ion-tabs class="tabs-icon-top tool-bar" ng-class="{'tabs-item-hide': hideTabs}">
    <ion-tab title="推廣" icon="bar-home-on" icon-on="bar-home-on" icon-off="bar-home-off" href="#/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> 
    <ion-tab title="收入" icon-on="bar-money-on" icon-off="bar-money-off" href="#/money"> <ion-nav-view name="money-tab" /> </ion-tab> 
    <ion-tab title="" icon-on="bar-service-on" icon-off="bar-service-off" href="#/service"> <ion-nav-view name="message-tab" /> </ion-tab> 
    <ion-tab title="消息" icon-on="bar-msg-on" icon-off="bar-msg-off" href="#/message"> <ion-nav-view name="message-tab" /> </ion-tab> 
    <ion-tab title="我的" icon-on="bar-mine-on" icon-off="bar-mine-off" href="#/user"> <ion-nav-view name="user-tab" /> </ion-tab> 
</ion-tabs>

css：

.tab-item  i.icon {
    margin-top: 1px;
}
.bar-home-on {
    background: url(images/bar-home.png) no-repeat center top
}

.bar-home-off {
    background: url(images/bar-home-off.png) no-repeat center top
}