Created By JishuBao on 2019-03-06 12:38:22
Recently revised in 2019-03-08 12:38:22
歡迎大家來到技術寶的掘金世界,您的star是我寫文章最大的動力！GitHub地址
開篇點題:
這是一篇教您如何使用阿里iconfont向量圖示的教程，看完此文，包你拿下iconfont不必苦惱。
感覺不錯的小夥伴，點贊star走一波;
感覺文章有誤的小夥伴，評論區、QQ群走一波；
虛心求教，不勝感激~
文章簡介：
1、什麼是iconfont？
2、為什麼要使用iconfont？
3、如何進入iconfont官網選圖示？
4、在web端(html,vue,react)中使用線上iconfont？
5、在web端(html,vue,react)中使用本地iconfont？
一、什麼是iconfont？
顧名思義iconfont就是把圖示用字型的方式呈現。
二、為什麼要使用iconfont？
其優點在於以下幾個方面:
1.可以通過css的樣式改變其顏色(最霸氣的理由）
2.相對於圖片來說,具有更高的解析度
3.更小的儲存
缺點:瀏覽器相容性不夠普及,所幸目前大部分主流瀏覽器都支援
三、如何進入iconfont官網選圖示?
進入阿里iconfont官網,註冊並登陸,登陸好以後在首頁點選我的專案,。
點選新增專案按鈕。
我們可以看到圖示上有三個按鈕！
接下來我們的示例demo都會使用選擇的這三個圖示(2個有色圖示,一個無色圖示)！
一.unicode是字型在網頁端最原始的應用方式，特點是：
1.相容性最好，支援ie6+，及所有現代瀏覽器。
2.支援按字型的方式去動態調整圖示大小，顏色等等。
3.但是因為是字型，所以不支援多色。只能使用平臺裡單色的圖示，就算專案裡有多色圖示也會自動去色。
二.font-class是unicode使用方式的一種變種，主要是解決unicode書寫不直觀，語意不明確的問題。
與unicode使用方式相比，具有如下特點：
1.相容性良好，支援ie8+，及所有現代瀏覽器。
2.相比於unicode語意明確，書寫更直觀。可以很容易分辨這個icon是什麼。
3.因為使用class來定義圖示，所以當要替換圖示時，只需要修改class裡面的unicode引用。
不過因為本質上還是使用的字型，所以多色圖示還是不支援的。
三.symbol這是一種全新的使用方式，應該說這才是未來的主流，也是平臺目前推薦的用法。相關介紹可以參考這篇文章
這種用法其實是做了一個svg的集合，與上面兩種相比具有如下特點：
1.支援多色圖示了，不再受單色限制。
2.通過一些技巧，支援像字型那樣，通過font-size,color來調整樣式。
3.相容性較差，支援 ie9+,及現代瀏覽器。
瀏覽器渲染svg的效能一般，還不如png。
四、在web端(html,vue,react)中使用線上iconfont？
使用線上iconfont的前提是先在head標籤裡面引入樣式檔案，在Iconfont裡面找到線上連結：
一、html中使用
1.unicode使用方法：
2.font-class使用方法：
3.symbol使用方法：
二、vue中使用
1.unicode使用方法:
2.font-class使用方法:
3.symbol使用方法：
效果:前面2個是有色圖示後面一個是無色圖示
三、react中使用
1.unicode使用方法:
效果:全部變成無色圖示
2.font-class使用方法:
效果:全部變成無色圖示
3.symbol使用方法：
線上使用iconfont雖然很省事,不需要下載很多檔案配置啥的,但是有一個缺點,當iconfont掛了,諸如此類發生...圖片載入很慢,導致使用者瀏覽頁面不友好等等,所以我們還是儘量少用線上，接下來教大家使用下載下來的圖示檔案使用
五、在web端(html,vue,react)中使用本地iconfont？
既然是使用本地的iconfont，本地肯定需要相應的iconfont檔案,點選下載至本地，將檔案下載解壓到我們的資料夾下。
下載下來的iconfont.css檔案
一、html中使用
1.unicode使用方法：
2.font-class使用方法：
3.symbol使用方法：
二、vue中使用
1.unicode使用方法:
2.font-class使用方法:
3.symbol使用方法：
效果:前面2個是有色圖示後面一個是無色圖示
三、react中使用
1.unicode使用方法:
效果:全部變成無色圖示
2.font-class使用方法:
效果:全部變成無色圖示
3.symbol使用方法：
是不是很簡單呢,小夥伴們！ 如果你覺得我的文章還不錯的話，可以給個star哦~，GitHub地址