Ionic3学习笔记(十五)自定义 tab icon
2018-02-05 本文已影响167人
Metaphors
本文为原创文章,转载请标明出处
美工做了一套 icon,自然是要用的。将 icon copy 到 assets
文件夹下。
例如 .icon-ios-home-custom
为 iOS icon 选中状态;.icon-ios-home-custom-outline
为 iOS icon 未选中状态。
app.scss
:
.ion-ios-home-custom, .ion-ios-home-custom-outline {
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
}
.ion-ios-home-custom {
content: url("../assets/icon/tabs/home-active.png");
}
.ion-ios-home-custom-outline {
content: url("../assets/icon/tabs/home-inactive.png");
}
tabs.html
:
<ion-tabs>
<ion-tab [root]="homeRoot" tabUrlPath="home" tabIcon="home-custom"></ion-tab>
</ion-tabs>
如有不当之处,请予指正,谢谢~