美文网首页ionic3+Ionic 3ionic
Ionic3学习笔记(十五)自定义 tab icon

Ionic3学习笔记(十五)自定义 tab icon

作者: Metaphors | 来源:发表于2018-02-05 15:47 被阅读167次

本文为原创文章,转载请标明出处

美工做了一套 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>

如有不当之处,请予指正,谢谢~

相关文章

网友评论

    本文标题:Ionic3学习笔记(十五)自定义 tab icon

    本文链接:https://www.haomeiwen.com/subject/cfcizxtx.html