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"; }
}
}
京公网安备 11010802041100号