![梅問題－[教學] 將新版FontAwesome5.0的圖示，引用到CSS中](http://photo.minwt.com/img/Content/CSS/fa5-add-css-content/fa5-add-css-content_00.jpg)
雖然現在有許多免費的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中](http://photo.minwt.com/img/Content/CSS/fa5-add-css-content/fa5-add-css-content_01.jpg)
Step2
貼到<head>…..</head>之間。
![梅問題－[教學] 將新版FontAwesome5.0的圖示，引用到CSS中](http://photo.minwt.com/img/Content/CSS/fa5-add-css-content/fa5-add-css-content_02.jpg)
Step3
接著再<body>裡，先建立一組html標籤。
![梅問題－[教學] 將新版FontAwesome5.0的圖示，引用到CSS中](http://photo.minwt.com/img/Content/CSS/fa5-add-css-content/fa5-add-css-content_03.jpg)
Step4
再到FontAwesome尋找所需的圖示後，除了會看到該圖示所用的樣式名稱外，在前方會看到該示圖示的代號，接著將此代號複製。
![梅問題－[教學] 將新版FontAwesome5.0的圖示，引用到CSS中](http://photo.minwt.com/img/Content/CSS/fa5-add-css-content/fa5-add-css-content_04.jpg)
Step5
接著當要將此圖示引用到專案的CSS時，在font-family需設定為Font Awesome 5 Free或Font Awesome 5 Brand，再把剛的代號，貼到content中。
![梅問題－[教學] 將新版FontAwesome5.0的圖示，引用到CSS中](http://photo.minwt.com/img/Content/CSS/fa5-add-css-content/fa5-add-css-content_05.jpg)
Step6
鏘～鏘～這樣就可將新版的FontAwesome的圖示，套用到自己專案的CSS中啦！如此一來在運用上就更加方便啦！
![梅問題－[教學] 將新版FontAwesome5.0的圖示，引用到CSS中](http://photo.minwt.com/img/Content/CSS/fa5-add-css-content/fa5-add-css-content_06.jpg)
範例預覽：