1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 如何免費使用 Font Awesome 5 向量文字圖示
網頁開發 網頁設計

如何免費使用 Font Awesome 5 向量文字圖示

2020/03/02

梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
  許多在設計網頁的朋友,對於Font Awesome這個免費的向量文字圖示,是再熟悉不過了,不但提供了成千上萬的免費圖示外,甚至還可用CDN的方式將這些漂亮的圖示,直接引用到網頁中,但隨著版本不斷更新後,目前最新版的Font Awesome已取消了CDN的方式載入,同時還新增了付費的機制。

  雖然目前Font Awesome 5.1.2.1有付費版外,同時還保有免費的部分,因此當要使用Font Awesome 5.1.2.1新版的文字圖示,則需將圖示下載後,再放到專案中,並且引用後才能使用,但這邊必需注意到,新版的Font Awesome並未向下相容,因此當有用舊版的Font Awesome圖示時,需分別將新舊版載入,才能正常顯示喔!至於新版要怎使用,現在就一塊來看看吧!


Font Awesome
網站名稱:Font Awesome
網站連結:https://fontawesome.com/

Step1
在進入Font Awesome的首頁後,點一下左手邊的免費按鈕。
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
Step2
接著將畫面向上拉,再點Download圖示。
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
Step3
進入後,再點右上的下載鈕。
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
Step4
下載完畢後,分別會看到以下資料夾,但只需保留css與webfonts資料夾就可以了。
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
Step5
接著在Font Awesome的網站後,可看到只需將all.css加到網頁的head標籤中。
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
Step6
加好後,再到Icons的頁籤中,搜尋所需的圖示,當深色為刷費,淡灰色為付費圖示。
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
Step7
接著再把該圖示的html標籤拷貝上來,而眼尖的朋友應該有發現到,新版的css樣式變成fas,而舊版4.7版則是fa。
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
Step8
就依續的將CSS載入,與套用所需的圖示名稱。
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示
Step9
鏘~鏘~這樣就出現了,新版的圖示,變得更平滑更漂亮,而付費版的部分,還可設定圖示的粗細,免費版則是固定一種粗細,因此有較進階需求的朋友,也可考慮升級為付費會員囉!
梅問題-如何免費使用Font Awesome 5.1.2.1免費文字圖示