码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-30 10:14:40      阅读:430      评论:0      收藏:0      [点我收藏+]

标签:ionic   设置   pre   gif   class   scss   自己的   safari   title   

添加自定义字体图标

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

 

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

标签:ionic   设置   pre   gif   class   scss   自己的   safari   title   

原文地址:http://www.cnblogs.com/zhouXX/p/7613233.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!