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>

效果：

 

至此自定义图标完成若是要使用图标就能够直接使用homeImg使用以前自定义的全局图标