标签：
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>
对应效果：
<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 }
标签：
原文地址：http://www.cnblogs.com/itman70s/p/ionic_bars.html
