Ionic有個自己的圖標庫,但是有些需要的圖標還是沒有,下面介紹一下阿里巴巴的矢量圖標庫,在Ionic中如何使用
由於度娘限制,自己百度下載地址吧~
輸入「阿里巴巴矢量圖標庫」百度搜索第一位就是啦
打開網址,你可以選擇右上角的搜索,搜索自己要的圖標,例如美女
再次點擊即可取消,或者在暫存架中滑鼠滑過圖標,圖標右上角有刪除小按鈕也可刪除選中
選擇好要用的圖標後,點擊暫存架的下載至本地,解壓待用
我們下載的圖標可看到了吧,按照demo的步驟,下面我們配置ionic的項目
靜態文件存放目錄,新建font文件夾用來存放字體文件(可自定義存放)
挑選相應圖標並獲取字體編碼,應用於頁面就可以顯示圖標啦
大家發現,Ionic的圖標只要加個類似ion-happy ion-XXX的class就可以應用相應的圖標,那麼我們怎麼用阿里巴巴的矢量圖標呢,不要急也有辦法
打開直接解壓的圖標文件中的iconfont.css文件
將那些.icon-XXX:before{content:'XXXX'}也複製到你的css文件中去
看過ionic css文件源碼的童鞋,是不是看到這些有點熟悉呢
那就對啦,只要在class中加 iconfont icon-XXX就可以使用圖標了
小編自己動手做了一個demo,下載了一些星座的表情的天氣的還有其他的,發現個bug,就是Chrome調試星座、內衣還有雨傘的圖標不能顯示,放自己的android手機上就可以顯示。如果小夥伴還有其他的不能顯示的話不用奇怪,可以反映給他們官方微博