簡介：Font Awesome是一套絕佳的圖標字體庫和CSS框架，它是可縮放的矢量圖標，用戶可以可以對圖標的特性進行更改，比如大小、顏色、陰影等並且可以組合不同的圖標創造自己喜歡的圖標。Font Awesome的產生，為網頁設計和Web前端開發人員帶來極大的方便

工具/原料

• 電腦、下載好的Bootstrap文件
• 代碼編輯器（sublime，nopade++等）

方法/步驟

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文件的路徑是否正確。

   步驟閱讀 END

註意事項

• 引用圖標時，一定要在class類中引入fa，然後在添加圖標的名稱
• font-awesome的使用很有趣，大家可以根據官網多加練習，會發現很多樂趣哦

圖標字的使用方法