---
# System prepended metadata

title: 一個好用的HTML icon資源：fontawesome

---

# 一個好用的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的樣式可以使用。
:::
