下載圖標(biāo)

1
由于度娘限制，自己百度下載地址吧~
輸入“阿里巴巴矢量圖標(biāo)庫”百度搜索第一位就是啦

2
打開網(wǎng)址，你可以選擇右上角的搜索，搜索自己要的圖標(biāo)，例如美女

3
也可以選擇去圖標(biāo)庫自行選擇想要的圖標(biāo)

4
選擇圖標(biāo)，點(diǎn)擊圖標(biāo)變成橘色，即放在暫存架

5
再次點(diǎn)擊即可取消，或者在暫存架中鼠標(biāo)滑過圖標(biāo)，圖標(biāo)右上角有刪除小按鈕也可刪除選中

6
選擇好要用的圖標(biāo)后，點(diǎn)擊暫存架的下載至本地，解壓待用

END
項(xiàng)目引用

1
打開解壓的文件夾中的demo.html

2
我們下載的圖標(biāo)可看到了吧，按照demo的步驟，下面我們配置ionic的項(xiàng)目

3
靜態(tài)文件存放目錄，新建font文件夾用來存放字體文件（可自定義存放）

4
css使用font-face聲明字體

5
css定義使用iconfont的樣式

6
挑選相應(yīng)圖標(biāo)并獲取字體編碼，應(yīng)用于頁面就可以顯示圖標(biāo)啦

END
Tab及其他標(biāo)簽引用圖標(biāo)

大家發(fā)現(xiàn)，Ionic的圖標(biāo)只要加個類似ion-happy ion-XXX的class就可以應(yīng)用相應(yīng)的圖標(biāo)，那么我們怎么用阿里巴巴的矢量圖標(biāo)呢，不要急也有辦法

打開直接解壓的圖標(biāo)文件中的iconfont.css文件

將那些.icon-XXX:before{content:'XXXX'}也復(fù)制到你的css文件中去
看過ionic css文件源碼的童鞋，是不是看到這些有點(diǎn)熟悉呢

那就對啦，只要在class中加 iconfont icon-XXX就可以使用圖標(biāo)了