下載圖標

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

2
打開網址，你可以選擇右上角的搜索，搜索自己要的圖標，例如美女

3
也可以選擇去圖標庫自行選擇想要的圖標

4
選擇圖標，點擊圖標變成橘色，即放在暫存架

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

6
選擇好要用的圖標后，點擊暫存架的下載至本地，解壓待用

END
項目引用

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

2
我們下載的圖標可看到了吧，按照demo的步驟，下面我們配置ionic的項目

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

4
css使用font-face聲明字體

5
css定義使用iconfont的樣式

6
挑選相應圖標并獲取字體編碼，應用于頁面就可以顯示圖標啦

END
Tab及其他標簽引用圖標

大家發現，Ionic的圖標只要加個類似ion-happy ion-XXX的class就可以應用相應的圖標，那么我們怎么用阿里巴巴的矢量圖標呢，不要急也有辦法

打開直接解壓的圖標文件中的iconfont.css文件

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

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