ion-icon tabIcon 使用自定义图片

2016-12-18  本文已影响246人  Siam

ion-icon使用自定义图片

系统已经提供了很多icon图标,见http://ionicframework.com/docs/v2/ionicons/
但是如果使用自己的图片,按照以下的方式,在********全局********SASS文件里加入:

.ion-${platform}-${iconName} {
   content: '${imagePath}'
}

上例中,

ion-tab使用自定义图片

未选中状态下:

.ion-${platform}-${iconName} {
   content: '${imagePath}'
}

选中状态下:

.ion-${platform}-${iconName}-outline {
   content: '${imagePath}'
   // 其它的一些属性设置
}

使用的时候,tabIcon属性直接赋值上面命名的${iconName}
------修改于2016.12.20
发现在android环境下,-outline无效,参照网上的资料,经验证如下方案可行:
未选中状态:

.ion-md-${iconName} {
   content: '${normalImagePath}'
}

选中状态需要加到 .tabs-md .tab-button[aria-selected=true]下,如:

.tabs-md .tab-button[aria-selected=true] {
  .ion-md-${iconName} {
     content: '${selectedImagePath}'
  }
}

其它的也一样,加进去即可,不需要添加-outline

上一篇下一篇

猜你喜欢

热点阅读