ionic3自定义tabs icon图标

1.tabs.scss

.ion-tab-icon-base {

width: 32px !important;

height: 32px !important;

padding: 4px 4px 2px;

}

.ion-tab-icon-md-base {

min-width: 0 !important;

height: 32px;

}

$tabImageName: 'home' 'task' 'news' 'my';

@ for $i from 1 to 5 {

//for ios

.ion-ios-tab-#{nth( $tabImageName, $i)} {

@ extend .ion-tab-icon-base;

content: url( "../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");

}

.ion-ios-tab-#{nth( $tabImageName, $i)}- outline {

@ extend .ion-tab-icon-base;

content: url( "../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");

}

// for android

.tabs-md .tab-button [aria-selected=true] {

.ion-md-tab-#{nth( $tabImageName, $i)} {

@ extend .ion-tab-icon-md-base;

content: url( "../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_on.png");

}

}

.tabs-md .tab-button [aria-selected=false] {

.ion-md-tab-#{nth( $tabImageName, $i)} {

@ extend .ion-tab-icon-md-base;

content: url( "../../assets/ui/tabs/icon_#{nth($tabImageName, $i)}_off.png");

}

}

}

.ion-ios-tab-task, .ion-ios-tab-task-outline, .ion-ios-tab-master, .ion-ios-tab-master-outline{

width: 30px !important;

height: 32px !important;

}

  2.tabs.html

<ion-tabs #mainTabs [selectedIndex]="mySelectedIndex">

<ion-tab [root]="homeView" tabTitle="首页" tabIcon="tab-home"> </ion-tab>

<ion-tab [root]="taskView" tabTitle="" tabIcon="tab-task"> </ion-tab>

<ion-tab [root]="courseView" tabTitle="" tabIcon="tab-news"> </ion-tab>

<ion-tab [root]="userCenterView" tabTitle="" tabIcon="tab-my"> </ion-tab>

<ion-tab [root]="demoView" tabTitle="" tabIcon="bug"> </ion-tab>

</ion-tabs>