ion-icon tabIcon 使用自定義圖片

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)的iosmd
  • ${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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末伏尼,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子尉尾,更是在濱河造成了極大的恐慌爆阶,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異辨图,居然都是意外死亡班套,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)徒役,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)孽尽,“玉大人,你說(shuō)我怎么就攤上這事忧勿∩寂” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵鸳吸,是天一觀的道長(zhǎng)熏挎。 經(jīng)常有香客問(wèn)我,道長(zhǎng)晌砾,這世上最難降的妖魔是什么坎拐? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮养匈,結(jié)果婚禮上哼勇,老公的妹妹穿的比我還像新娘。我一直安慰自己呕乎,他們只是感情好积担,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布疏尿。 她就那樣靜靜地躺著辞友,像睡著了一般。 火紅的嫁衣襯著肌膚如雪拌阴。 梳的紋絲不亂的頭發(fā)上湿刽,一...
    開(kāi)封第一講書(shū)人閱讀 52,807評(píng)論 1 314
  • 那天的烁,我揣著相機(jī)與錄音,去河邊找鬼诈闺。 笑死渴庆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的雅镊。 我是一名探鬼主播把曼,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼漓穿!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起注盈,我...
    開(kāi)封第一講書(shū)人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤晃危,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體僚饭,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡震叮,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了鳍鸵。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片苇瓣。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖偿乖,靈堂內(nèi)的尸體忽然破棺而出击罪,到底是詐尸還是另有隱情,我是刑警寧澤贪薪,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布媳禁,位于F島的核電站,受9級(jí)特大地震影響画切,放射性物質(zhì)發(fā)生泄漏竣稽。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一霍弹、第九天 我趴在偏房一處隱蔽的房頂上張望毫别。 院中可真熱鬧,春花似錦典格、人聲如沸岛宦。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)恋博。三九已至,卻和暖如春私恬,著一層夾襖步出監(jiān)牢的瞬間债沮,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工本鸣, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留疫衩,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓荣德,卻偏偏與公主長(zhǎng)得像闷煤,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子涮瞻,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,336評(píng)論 25 707
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 46,794評(píng)論 22 665
  • ¥開(kāi)啟¥ 【iAPP實(shí)現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開(kāi)一個(gè)線程鲤拿,因...
    小菜c閱讀 6,451評(píng)論 0 17
  • 《裕語(yǔ)言》速成開(kāi)發(fā)手冊(cè)3.0 官方用戶交流:iApp開(kāi)發(fā)交流(1) 239547050iApp開(kāi)發(fā)交流(2) 10...
    葉染柒丶閱讀 27,095評(píng)論 5 19
  • 美好在日常。 等風(fēng)來(lái) 風(fēng)鈴響起時(shí) 心中升起小太陽(yáng) 也就不覺(jué)得冷了署咽。 --你也有這樣一個(gè)能吹來(lái)溫暖的風(fēng)鈴么
    小梅弄堂閱讀 214評(píng)論 0 2