• 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
  • 相关阅读:
    Linux下搭建PHP环境的参考文章小记
    jQuery遇到问题的小记
    小程序 login
    小程序编辑器vscode
    弹性布局详解——5个div让你学会弹性布局
    vue在页面嵌入别的页面或者是视频2
    VUE设置浏览器icon图标
    遮罩层出现后不能滚动 添加事件@touchmove.prevent
    vue 在script里写页面跳转
    axios post、get 请求参数和headers配置
  • 原文地址:https://www.cnblogs.com/zhouXX/p/7613233.html
走看看 - 开发者的网上家园