ion-icon使用自定義圖片
系統(tǒng)已經(jīng)提供了很多icon圖標(biāo),見(jiàn)http://ionicframework.com/docs/v2/ionicons/
但是如果使用自己的圖片砌庄,按照以下的方式证舟,在********全局********SASS文件里加入:
.ion-${platform}-${iconName} {
content: '${imagePath}'
}
上例中堂氯,
-
${platform}
替換成對(duì)應(yīng)的ios
、md
-
${iconName}
圖片的名稱,對(duì)應(yīng)的是ion-icon
標(biāo)簽里的name
屬性 -
${imagePath}
即圖片的名稱
使用起來(lái)就比較簡(jiǎn)單了梭灿,跟使用系統(tǒng)原生的一樣,name
屬性賦值上例中的${iconName}
ion-tab使用自定義圖片
未選中狀態(tài)下:
.ion-${platform}-${iconName} {
content: '${imagePath}'
}
選中狀態(tài)下:
.ion-${platform}-${iconName}-outline {
content: '${imagePath}'
// 其它的一些屬性設(shè)置
}
使用的時(shí)候冰悠,tabIcon
屬性直接賦值上面命名的${iconName}
------修改于2016.12.20
發(fā)現(xiàn)在android環(huán)境下堡妒,-outline
無(wú)效,參照網(wǎng)上的資料溉卓,經(jīng)驗(yàn)證如下方案可行:
未選中狀態(tài):
.ion-md-${iconName} {
content: '${normalImagePath}'
}
選中狀態(tài)需要加到 .tabs-md .tab-button[aria-selected=true]
下皮迟,如:
.tabs-md .tab-button[aria-selected=true] {
.ion-md-${iconName} {
content: '${selectedImagePath}'
}
}
其它的也一樣,加進(jìn)去即可桑寨,不需要添加-outline