# 一個好用的HTML icon資源：fontawesome https://fontawesome.com/ # 註冊 進到官網首頁之後，點擊右上角Sign in ![](https://i.imgur.com/37qQIVS.png) 輸入你的電子郵件，他會發送一封郵件到你的信箱 ![](https://i.imgur.com/lx0iEz8.png) 寄送之後會出現以下的畫面，代表郵件已經成功發送，去信箱查看一下是不是有收到fontawesome的信件 ![](https://i.imgur.com/6U1JMBL.png) 點擊confirm Your Email Address，進行確認 ![](https://i.imgur.com/xVMSund.png) 設定密碼 ![](https://i.imgur.com/aaYWHnf.png) 填完基本資料之後就可以正式開始使用囉！ ![](https://i.imgur.com/qHv0yrG.png) ## Your kits 要開始使用fontawesome的icon之前，你得先把以下這段script複製到你的HTML檔案中`<head></head>`標籤 ![](https://i.imgur.com/Eh2GFFL.png) ```xml= <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script> <title>Document</title> </head> <body> </body> </html> ``` # 使用你的第一個icon :::warning 使用之前，請確認你已經將上一個步驟完成(將kits的script貼到html的head裡面) ::: 在搜尋的地方用英文輸入你想要的icon，並且點選Free的圖示，會出現免費使用者可以使用的icon ![](https://i.imgur.com/VDHUulU.png) 點擊icon之後，可以調整size，然後複製底下的HTML程式碼到你的HTML當中。 ![](https://i.imgur.com/xkYrbdJ.png) ```xml= <body> <i class="fa-solid fa-gears fa-2xs"></i> </body> ``` ![](https://i.imgur.com/OH15hQZ.png) :::info 每一個icon都是一組class，用`<i></i>`標籤來呈現，並且根據不同的樣式會有不同的class。但是因為我們是免費的使用者，所以只有Free icon的樣式可以使用。 :::