ion-icon使用自定义图片
系统已经提供了很多icon图标,见http://ionicframework.com/docs/v2/ionicons/
但是如果使用自己的图片,按照以下的方式,在********全局********SASS文件里加入:
.ion-${platform}-${iconName} {
content: '${imagePath}'
}
上例中,
-
${platform}
替换成对应的ios
、md
-
${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