添加自定义字体图标
在src目录下新建icon文件夹，把字体文件放进去。然后在theme/variables.scss中后面添加以下内容，注意把相应位置替换成你自己的：
1 $iconfont-path: "../assets/icon"; 2 3 @font-face { 4 font-family: "iconfont"; 5 src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046'); /* IE9*/ 6 src: url('#{$iconfont-path}/iconfont.eot?t=1495679878046#iefix') format('embedded-opentype'), /* IE6-IE8 */ 7 url('#{$iconfont-path}/iconfont.woff?t=1495679878046') format('woff'), /* chrome, firefox */ 8 url('#{$iconfont-path}/iconfont.ttf?t=1495679878046') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 9 url('#{$iconfont-path}/iconfont.svg?t=1495679878046#iconfont') format('svg'); /* iOS 4.1- */ 10 } 11 12 .iconfont { 13 font-family: "iconfont" !important; 14 font-size: 1.6rem; 15 font-style: normal; 16 -webkit-font-smoothing: antialiased; 17 -moz-osx-font-smoothing: grayscale; 18 } 19 20 .ion-md-customer-home:before, 21 .ion-ios-customer-home:before, 22 .ion-ios-customer-home-outline:before, 23 .ion-md-customer-rank:before, 24 .ion-ios-customer-rank:before, 25 .ion-ios-customer-rank-outline:before, 26 .ion-md-customer-stock:before, 27 .ion-ios-customer-stock:before, 28 .ion-ios-customer-stock-outline:before { 29 @extend .iconfont; 30 } 31 32 .ion-md-customer-home:before { //在这里自定义你的名字，例如：customer-home，前缀也要加上，与平台相关 33 content: "e60f"; 34 } 35 36 .ion-ios-customer-home:before { 37 content: "e611"; 38 } 39 40 .ion-ios-customer-home-outline:before { 41 content: "e60f"; 42 } 43 44 .ion-md-customer-rank:before { 45 content: "e60d"; 46 } 47 48 .ion-ios-customer-rank:before { 49 content: "e60e"; 50 } 51 52 .ion-ios-customer-rank-outline:before { 53 content: "e60d"; 54 } 55 56 .ion-md-customer-stock:before { 57 content: "e610"; 58 } 59 60 .ion-ios-customer-stock:before { 61 content: "e612"; 62 } 63 64 .ion-ios-customer-stock-outline:before { 65 content: "e610"; 66 } 67 $tabs-ios-tab-text-color-active:#f6670B; //设置点击后的颜色 68 $tabs-ios-tab-icon-color-active:#f6670B; 69 $tabs-md-tab-text-color-active:#f6670B; 70 $tabs-md-tab-icon-color-active:#f6670B;
然后在需要的地方，例如在tabs.html中：
1 <ion-tabs> 2 <ion-tab [root]="tab1Root" tabTitle="{{ 'TABS.TAB1_TITLE' | translate }}" tabIcon="customer-home"></ion-tab> 3 <ion-tab [root]="tab2Root" tabTitle="{{ 'TABS.TAB2_TITLE' | translate }}" tabIcon="customer-rank"></ion-tab> 4 </ion-tabs>