开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Ionic3学习笔记9-16

共 8 篇文章

1

Ionic3学习笔记（九）关于 Android 端软键盘弹出后界面被压缩的问题

2

Ionic3学习笔记（十）实现夜间模式功能

3

Ionic3学习笔记（十一）实现省市区三级联动

4

Ionic3学习笔记（十二）拍照上传图片以及从相册选择图片上传

5

Ionic3学习笔记（十三）HttpClient 实现 HTTP 请求以及踩过的一些坑

6

Ionic3学习笔记（十四）使用 Videogular2 实现视频播放以及遇到的一些问题

7

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

8

Ionic3学习笔记（十六）上传头像至第三方图床

清单首页Ionic3学习笔记9-16文章详情

清单「Ionic3学习笔记9-16」 07/08

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

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

举报