ionic2 tab使用自定义图标

在ionic2中图标是通过类添加的

比如说 tabIcon="homeImg"

在页面中研究可以看到在ios上有两个类是　.ion-ios-homeImg:before 和 .ion-ios-homeImg-outline

第一个是选中的状态，第二个是未选中的状态

在android上只有一个类　.ion-md-homeImg:before

选中未选中都是这一个

所以我们就可以在这个类上用黑科技(当然没有homeImg这个图标这是我自定义的)

在app.scss 中做一个全局的图标可以在任意地方使用

.ion-ios-homeImg:before{
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  background: no-repeat url('http://www.baidu.com/selection.png');
}

.ion-ios-homeImg-outline{
  content: ''; width: 30px; height: 30px; display: block; background: no-repeat url('http://www.baidu.com/unselection.png'); }

.ion-md-homeImg:before{
  content: ''; width: 30px; height: 30px; display: block; background: no-repeat url('http://www.baidu.com/selection.png'); }

这里需要注意一点是selection.png必须使用网络图片，不能够识别本地图片

  <ion-tab [root]="tab1Root" [tabsHideOnSubPages]="true" tabTitle="首页" tabIcon="homeImg"></ion-tab>

效果：

ionic2 tab使用自定义图标

至此自定义图标完成如果要使用图标就可以直接使用homeImg使用之前自定义的全局图标

秒客网

ionic2 tab使用自定义图标

相关文章