ionic之自定义 ion-tabs 图标

这个文章积攒了好久了,每次想要写的时候都会有事情打断,挺郁闷的.

前几天我们微信公众号改版,正好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标签图标？ 譬如：

<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
}