ionic使用iconfont-阿里巴巴矢量圖標庫是什么

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

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

材料/工具

iconfont

方法

登錄Iconfont官網(wǎng)。

搜索圖標并加入購物車。

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

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

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

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

復制生成的鏈接。

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

挑選圖標并下載到本地。

復制字體文件到項目中。

到項目中進行粘貼。

新建一個tab.scss文件。

復制下載的iconfont.css文件的內(nèi)容到其中。

修改后的tab.scss。

在tab中使用。

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

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

命名可以根據(jù)個人喜好。

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

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

擴展閱讀，以下內(nèi)容您可能還感興趣。

ionic favicon.ico在哪

Icon一般都在Resources文件夾里

ionic favicon.ico在哪

Icon一般都在Resources文件夾里

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

使用方法為：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

下載圖標

1

由于度娘*，自己百度下載地址吧~

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

2

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

3

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

4

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

5

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

6

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

END

項目引用

1

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

2

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

3

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

4

css使用font-face聲明字體

5

css定義使用iconfont的樣式

6

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

END

Tab及其他標簽引用圖標

1

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

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

2

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

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

3

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

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

《史上最全P4P系列課》

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:0731-84117792 E-MAIL:11247931@qq.com