ionic3 tabs 更改icon 自定义图标

最新推荐文章于 2022-12-08 18:29:32 发布

weixin_30815427

最新推荐文章于 2022-12-08 18:29:32 发布

阅读量299

点赞数

原文链接：http://www.cnblogs.com/niunai007/p/8555948.html

版权

1.第一步

下载阿里巴巴矢量图标

2.第二步

拷贝文件到assets/fonts文件中

如图：

第三步

引人iconfont.css文件到index.html中

<link rel="stylesheet" href="assets/fonts/iconfont.css">

第四步

在tabs.html文件中更改对应的icon名称

<ion-tabs id="anTabs">
  <ion-tab [root]="tab1Root" tabTitle="申请记录" tabIcon="icon-ic_sqjl"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="关联客户" tabIcon="icon-ic_glkh"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="我的" tabIcon="icon-ic_me"></ion-tab>
</ion-tabs>

代码中的icon-ic_sqjl，icon-ic_glkh，icon-ic_me是你对应的scss名称

第五步：

在tabs.scss文件中添加

page-tabs {
  #anTabs {
    ion-icon {
      font-family:"iconfont" !important;
      font-size:28px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    .tab-button[aria-selected=true],.tab-button[aria-selected=true] .tab-button-icon{
      color: #14c182;
    }
    .tab-button[aria-selected=false],.tab-button[aria-selected=false] .tab-button-icon{
      color: #cccccc;
    }

    .ion-md-icon-ic_sqjl:before { content: "\e650"; }
    .ion-md-icon-ic_sqjl-outline:before { content: "\e650"; }
    .ion-ios-icon-ic_sqjl:before { content: "\e650"; }
    .ion-ios-icon-ic_sqjl-outline:before { content: "\e650"; }

    .ion-md-icon-ic_glkh:before { content: "\e652"; }
    .ion-md-icon-ic_glkh-outline:before { content: "\e652"; }
    .ion-ios-icon-ic_glkh:before { content: "\e652"; }
    .ion-ios-icon-ic_glkh-outline:before { content: "\e652"; }

    .ion-md-icon-ic_me:before { content: "\e63c"; }
    .ion-md-icon-ic_me-outline:before { content: "\e63c"; }
    .ion-ios-icon-ic_me:before { content: "\e63c"; }
    .ion-ios-icon-ic_me-outline:before { content: "\e63c"; }

  }
}

转载于:https://www.cnblogs.com/niunai007/p/8555948.html