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">
    
  ion-tab>

  <ion-tab title="关于" icon-on="ion-ios7-clock" icon-off="ion-ios7-clock-outline">
    
  ion-tab>

  <ion-tab title="设置" icon-on="ion-ios7-gear" icon-off="ion-ios7-gear-outline">
    
  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
}

 

 

 

转载于:https://www.cnblogs.com/itman70s/p/ionic_bars.html