ionic项目中使用自定义图标打包出现错误-broken import

添加自定义字体图标

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

View Code

然后在需要的地方，例如在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>

View Code