Ionic3学习笔记（十五）自定义 Tab Icon

Theo Tsao

发布于 2018-09-07 16:17:19

7570

发布于 2018-09-07 16:17:19

文章被收录于专栏：Theo TsaoTheo Tsao

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-02-05，如有侵权请联系 cloudcommunity@tencent.com 删除

ios

html

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

ios

html

登录后参与评论

0 条评论

热度

Ionic3学习笔记（十五）自定义 Tab Icon

Ionic3学习笔记（十五）自定义 Tab Icon

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐