ion-icon tabIcon 使用自定义图片

ion-icon使用自定义图片

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

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

上例中,

  • ${platform}替换成对应的iosmd
  • ${iconName}图片的名称,对应的是ion-icon标签里的name属性
  • ${imagePath}即图片的名称
    使用起来就比较简单了,跟使用系统原生的一样,name属性赋值上例中的${iconName}

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

你可能感兴趣的:(ion-icon tabIcon 使用自定义图片)