添加自定義字體圖標

在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>

ionic項目中使用自定義圖標打包出現錯誤-broken import