CSS CSS3 網頁開發

[教學] 將新版FontAwesome5.0的圖示,引用到專案中的CSS裡

梅干 2019/01/24

梅問題-[教學] 將新版FontAwesome5.0的圖示,引用到CSS中

  雖然現在有許多免費的IconFont資源可使用,但梅干最常使用的還是資源則是FontAwesome,除了裡面圖示相當豐富外,再來就是圖示也比較漂亮,甚至也可以將圖示,直接引用到自己專案的CSS中,這樣在運用上就可變得更加靈活,但自從FontAwesome升級成5.0版後,似乎就無法透過先前的方式,將FontAwesome的圖示引用到自己的CSS中。

  其實要將FontAwesome5.0版的圖示,引用到自己專案中的CSS時,主要是font-family有所改變,因此只需修改font-family,立即就可將FontAwesome5.0版的圖示引用到CSS中,由於FontAwesome會不斷的更新圖示,因此梅干也會比較建議,直接引用FontAwesome所提供的CSS連結,如此一來就不用一直更換FontAwesome啦!至於要如何將FontAwesome的圖示,套用到自己專案的CSS中,現在也一塊來看看囉!


Step1
首先進到FontAwesome的網站後,將CSS複製起來。
梅問題-[教學] 將新版FontAwesome5.0的圖示,引用到CSS中
Step2
貼到<head>…..</head>之間。
梅問題-[教學] 將新版FontAwesome5.0的圖示,引用到CSS中
Step3
接著再<body>裡,先建立一組html標籤。
梅問題-[教學] 將新版FontAwesome5.0的圖示,引用到CSS中
Step4
再到FontAwesome尋找所需的圖示後,除了會看到該圖示所用的樣式名稱外,在前方會看到該示圖示的代號,接著將此代號複製。
梅問題-[教學] 將新版FontAwesome5.0的圖示,引用到CSS中
Step5
接著當要將此圖示引用到專案的CSS時,在font-family需設定為Font Awesome 5 FreeFont Awesome 5 Brand,再把剛的代號,貼到content中。
梅問題-[教學] 將新版FontAwesome5.0的圖示,引用到CSS中
Step6
鏘~鏘~這樣就可將新版的FontAwesome的圖示,套用到自己專案的CSS中啦!如此一來在運用上就更加方便啦!
梅問題-[教學] 將新版FontAwesome5.0的圖示,引用到CSS中
範例預覽: