ionic3 tab实现自定义图片替换字体图标

Ionic 自带的图标库固然提供了一系列的字体图标文件供开发者使用，但有时候不一定就能找到开发者想要的图标，而美工又设计出看起来漂亮的tab图标，那么这个时候就需要开发者想方设法的做到美工想要看到的效果了，找了N多资料，终于亲身试验过，可以使用自定义的图片来替换图标的方法，总结一下备忘。上代码：

[plain]  view plain  copy

1. <ion-tabs name="home">  
2.   <ion-tab [root]="tab1Root" tabUrlPath="a" tabTitle="tab1" tabIcon="tab-tab1"></ion-tab>  
3.   <ion-tab [root]="tab2Root" tabUrlPath="b" tabTitle="tab2" tabIcon="tab-tab2"></ion-tab>  
4.   <ion-tab [root]="tab3Root" tabUrlPath="c" tabTitle="tab3" tabIcon="tab-tab3"></ion-tab>  
5.   <ion-tab [root]="tab4Root" tabUrlPath="d" tabTitle="tab4" tabIcon="tab-tab4"></ion-tab>  
6.   <ion-tab [root]="tab5Root" tabUrlPath="e" tabTitle="tab5" tabIcon="tab-tab5"></ion-tab>  
7. </ion-tabs>  

在app.scss中添加：

[css]  view plain  copy

1. .ion-tab-icon-base {    
2.   width: 20px;    
3.   height: 20px;    
4.   padding: 0px 1px 1px;    
5. }    
6.     
7. .ion-tab-icon-md-base {    
8.   width: 25px;  
9.   min-width: 25px !important;    
10.   height: 25px;  
11. }    
12.     
13. $tabImageName: 'tab1' 'tab2' 'tab3' 'tab4' 'tab5';    
14. @for $i from 1 to 6 {    
15.   //for ios    
16.   .ion-ios-tab-#{nth($tabImageName, $i)} {    
17.     @extend .ion-tab-icon-base;  
18.     content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}_choosed.png");  
19.   }    
20.   .ion-ios-tab-#{nth($tabImageName, $i)}-outline {    
21.     @extend .ion-tab-icon-base;  
22.     content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}.png");    
23.   }    
24.     
25.   // for android    
26.   .tabs-md .tab-button[aria-selected=true] {    
27.     .ion-md-tab-#{nth($tabImageName, $i)} {    
28.       @if $i == 1 {  
29.         width: 23px;  
30.         min-width: 23px !important;    
31.         height: 23px;  
32.       } @else if $i == 2{  
33.         width: 25px;  
34.         min-width: 25px !important;    
35.         height: 20px;  
36.         padding: 2px 1px 1px;  
37.       } @else {  
38.         @extend .ion-tab-icon-md-base;    
39.       }  
40.       content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}_choosed.png");    
41.     }    
42.   }    
43.   .tabs-md .tab-button[aria-selected=false] {    
44.     .ion-md-tab-#{nth($tabImageName, $i)} {  
45.       @if $i == 1 {  
46.         width: 24px;  
47.         min-width: 24px !important;    
48.         height: 24px;  
49.       } @else if $i == 2{  
50.         width: 25px;  
51.         min-width: 25px !important;    
52.         height: 18px;  
53.       } @else if $i == 3{  
54.         width: 22px;  
55.         min-width: 22px !important;    
56.         height: 25px;  
57.       } @else {  
58.         @extend .ion-tab-icon-md-base;    
59.       }  
60.       content: url("../assets/icon/tabs/#{nth($tabImageName, $i)}.png");    
61.     }    
62.   }    
63. }  

好了，完成以上代码后保存一下，然后启动服务看看吧，现在应该已经换成美工设计的图片图标了