為什么要使用阿里巴巴矢量圖標(biāo)庫(kù) Iconfont？
- Iconfont 提供了近百萬(wàn)的圖標(biāo)，并且有多種使用方式
- 使用字體圖標(biāo)，相對(duì)圖片占用空間小，更清晰，大小顏色更易控制
- ionic 官方提供的圖標(biāo)不夠用，沒(méi)有具體業(yè)務(wù)方面合適的圖標(biāo)
如何使用 Iconfont？
-
搜索圖標(biāo)并加入購(gòu)物車(chē)
搜索圖標(biāo)并加入購(gòu)物車(chē) -
點(diǎn)擊右上角購(gòu)物車(chē)圖標(biāo)，點(diǎn)擊"添加至項(xiàng)目"，沒(méi)有項(xiàng)目則會(huì)提示創(chuàng)建項(xiàng)目
將圖標(biāo)添加至項(xiàng)目 -
在 APP 中使用圖標(biāo)：
- 使用鏈接方式
在圖標(biāo)管理 - 我的項(xiàng)目中編輯圖標(biāo)，并生成圖標(biāo)鏈接
生成圖標(biāo)鏈接復(fù)制生成的鏈接，并添加到 app 的 index.html 文件中。注意：給鏈接加上 http: 或 https:，否則在真機(jī)上顯示不出來(lái)。
復(fù)制生成的 css 鏈接在 index.html 添加 css 鏈接使用：
<ion-item> <ion-icon class="iconfont icon-zhifubao"></ion-icon> </ion-item> <ion-item> <ion-icon class="iconfont icon-jijianfasong-xianxing"></ion-icon> </ion-item>- 下載到本地方式
挑選圖標(biāo)并下載到本地：
下載到本地復(fù)制字體文件到項(xiàng)目中：
本地文件復(fù)制字體文件到項(xiàng)目在 index.html 中引入然后就可以使用圖標(biāo)了。
