網頁開發 網頁設計

[教學] Font Awesome5 免下載!CDN立即引用隨時套用最新的ICON圖示

梅干 2018/12/13

梅問題-[教學] Font Awesome5 免下載!CND立即引用隨時使用最新的ICON圖示

  先前也曾分享過,網路許多免費的Font ICON圖示,但梅干最常使用的Font ICON 就是Font Awesome,從它4.0版就持續在使用,除了擁有大量的Font ICON圖示外,再來就是這些圖示都是相當常用與實用,同時Font Awesome除了可以網頁上使用,也提供桌面程式,讓這些圖示也可附掛在,Photoshop的影像軟體中,無論是版面上的設計,還是要用於平面上都沒問題,因此是一個相當實用的Font ICON。

由於Font Awesome在4.0版,只提供素材檔,因此需自行下載,並引用到專案頁面中,才可以使用,但有用過的朋友,應該時常會遇到一個問題,就是每隔一陣子,Font Awesome就會推出新的圖示,這時就得重新下載並引用後,才能使用這些新的圖示,但自從Font Awesome推出5.0版,就提供CDN的服務,因此只需將css引用到網頁中,立即就能使用Font Awesome的圖示,同時隨時是最新狀態,完全不用擔心新圖示,舊素材無法顯示的問題 但Font Awesom 5.0要怎使用,現在就一塊來看看吧!


Font Awesom
素材名稱:Font Awesom
素材連結:https://fontawesome.com/

Step1
當進入到Font Awesome的網站後,目前5.0版有分付費與免費版,而免費版的部分,完全無需註冊,點選Start Using Free鈕,立即就可使用。
梅問題-[教學] Font Awesome5 免下載!CDN立即引用隨時使用最新的ICON圖示
Step2
接著將上方的css複製起來。
梅問題-[教學] Font Awesome5 免下載!CDN立即引用隨時使用最新的ICON圖示
Step3
再貼到自己專案頁面的head標籤之中,這樣就已經引用完成了,夠簡單吧!
梅問題-[教學] Font Awesome5 免下載!CDN立即引用隨時使用最新的ICON圖示
Step4
當要使用ICON時,回到Font Awesome的網站,再點上方的Icons頁籤。
梅問題-[教學] Font Awesome5 免下載!CDN立即引用隨時使用最新的ICON圖示
Step5
搜尋所需的素材後,分別會看到圖示有深淺,深色的是免費版的,當要使用時,再對著圖示點一下。
梅問題-[教學] Font Awesome5 免下載!CDN立即引用隨時使用最新的ICON圖示
Step6
點選進入後,再對著上方的html標籤,點一下立即就可將它複製起來。
梅問題-[教學] Font Awesome5 免下載!CDN立即引用隨時使用最新的ICON圖示
Step7
接著再把它,再貼到頁面中的body底下。
梅問題-[教學] Font Awesome5 免下載!CDN立即引用隨時使用最新的ICON圖示
Step8
鏘~鏘~這樣就可正常的顯示,雖然目前也可下載單一素材檔,放在自己的主機中,但就目前所提供的CDN速度還蠻快的,同時也可隨時使用新圖示,再也不用擔心,新的圖示舊素材檔不包含的問題發生。
梅問題-[教學] Font Awesome5 免下載!CDN立即引用隨時使用最新的ICON圖示