在前端開發中，許多新手常會遇見一個問題，參考的網頁上有類似下圖的圖標，但在資源里卻找不到對應的文件，這是因為這些網頁使用了圖標庫。這裡介紹一種常見的圖標庫——FontAwesome的使用。 1.登錄Font Awesome官網，下載Font Awesome安裝包，最好下載最新版本的，因為最新版本中的 ...
在前端開發中，許多新手常會遇見一個問題，參考的網頁上有類似下圖的圖標，但在資源里卻找不到對應的文件，這是因為這些網頁使用了圖標庫。這裡介紹一種常見的圖標庫——FontAwesome的使用。
1.登錄Font Awesome官網，下載Font Awesome安裝包，最好下載最新版本的，因為最新版本中的更新的子圖圖標相對於老版本數量比較全面
附：Font Awesome官網
http://fontawesome.dashgame.com/
2.下載好壓縮包後，點擊文件夾，找到CSS文件夾裡面的font-awesome.css或者font-awesome.min.css（表示壓縮過的）複製到自己項目裡面的CSS文件夾中，並把安裝包文件夾中的fonts文件夾整個文件夾複製到自己項目中。
3.打開HTML頁面，在head頭部中引入font-awesome.css。
<link rel="stylesheet" href="css/font-awesome.min.css">
當然了，如果沒有下載安裝包的，可以引入線上css。
比如：<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
4.圖標的引用：font-awesome圖標可以任何一個地方引用，只要在該元素的類中加入首碼fa，在加入對應的圖標名稱。不知道圖標的名稱，可以在官網中找到對應的圖標，即可以找到對應的圖標名稱。
<i class="fa fa-car"></i>、<i class="fa fa-book"></i>
註：Font Awesome 設計為與內聯元素一起使用。 <i>和 <span> 元素廣泛用於圖標。
5.可以直接對圖標的屬性進行更改，如圖標的顏色、大小，並且可以組合不同的圖標形成所需的圖標等。
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
6.執行以上步驟，若是沒有圖標顯示，可以打開font-awesome.css，檢查字體庫，即引入fonts文件的路徑是否正確。
7.註意事項：引用圖標時，一定要在class類中引入fa，然後在添加圖標的名稱
