ionic使用iconfont，阿里巴巴矢量圖標庫是什麼

;4、css使用font-face聲明字體;5、css定義使用iconfont的樣式;6、挑選相應圖標並獲取字體編碼,應用於頁面就可以顯示圖標了。如何下載阿里巴巴矢量圖標庫1、輸入“阿里巴

Iconfont提供了近百萬數量的圖標,並且有多種使用方式。使用字體圖標,相對圖片佔用小,更清晰,大小顏色更易控制。ionic官方提供的圖標不夠用,沒有具體業務方面合適的圖標，因此下面介紹Ionic使用Iconfont-阿里巴巴矢量圖標庫的方法。

材料/工具

iconfont

方法

登錄Iconfont官網。

搜索圖標並加入購物車。

點擊右上角購物車圖標,在打開的窗口中,點擊"添加至項目",沒有項目則會提示創建項目。

在app中使用自定義字體圖標-Iconfont官方方式。效果圖如圖所示。

在“圖標管理”“我的項目”中編輯圖標,並生成圖標鏈接。

複製生成的鏈接並添加到appsrc/index.html文件中.注意:給鏈接加上“http:”或“https:”否則在真機上顯示不出來。當然也可以把資源下載到本地進行引用iconfont.css。

複製生成的鏈接。

在tab中使用自定義字體圖標-ionic方式。效果圖如圖所示。

挑選圖標並下載到本地。

複製字體文件到項目中。

到項目中進行粘貼。

新建一個tab.scss文件。

複製下載的iconfont.css文件的內容到其中。

修改後的tab.scss。

在tab中使用。

其實在任何地方都可以用zhifubao和qq,也可以不用新建tab.scss,直接把自定義的css寫在src/theme/variables.scss文件中,因爲所有的.scss最終編譯的css都放在了www/build/main.css文件中。

在tab中使用自定義圖標-圖片方式。效果圖如圖所示。

命名可以根據個人喜好。

查看圖片代碼，如圖所示。

如圖所示，仍爲圖片代碼。

擴展閱讀，以下內容您可能還感興趣。

ionic favicon.ico在哪

Icon一般都在Resources文件夾裏

ionic favicon.ico在哪

Icon一般都在Resources文件夾裏

iconfont阿里巴巴矢量圖標庫怎麼用？

使用方法爲：

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

2、看到下載的圖標，按照demo的步驟，配置ionic的項目；

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

4、css使用font-face聲明字體；

5、css定義使用iconfont的樣式；

6、挑選相應圖標並獲取字體編碼，應用於頁面就可以顯示圖標了。

如何下載阿里巴巴矢量圖標庫

1、輸入“阿里巴巴矢量圖標庫”百度搜索第一位就是；

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

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

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

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

6、選擇好要用的圖標後，點擊暫存架的下載至本地，解壓待用即可。

請教ios上使用阿里巴巴iconfont的問題

下載圖標

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及其他標籤引用圖標

1

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

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

2

將那些.icon-XXX:before{content:'XXXX'}也複製到你的css文件中去

看過ionic css文件源碼的童鞋，是不是看到這些有點熟悉呢

3

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

如果P4P沒有用好的話，反而會影響到自然流量，建議系統學習一下P4P

《史上最全P4P系列課》