---
# System prepended metadata

title: 在 css 使用 Font Awesome Icon
tags: [語法堂]

---

# 在 css 使用 Font Awesome Icon
###### tags: `語法堂`

## 前置作業
* 使用 加入 -> 用戶端程式庫 安裝 Font Awesome 的話記得要裝 webfonts
![](https://i.imgur.com/HBbauZV.png)

某次未顯示，出現框框，出現了以下錯誤訊息才發現少裝
```
GET http://localhost:44318/Library/font-awesome/webfonts/fa-regular-400.woff2 net::ERR_ABORTED 404
```


## 用法
content裡面就是偽元素所加的內容，在此為icon圖案，但是使用fontawesome這種字型icon只要輸入unicode代碼就可使用
unicode代碼在icon內頁就可找到

![](https://i.imgur.com/jHLf0vy.png)

```
.button:before {
  font-family: "Font Awesome 5 Free"; 
  font-weight: bold; 
  content: "\f007";
  font-size: 14px;
}
```

### 有些圖片 font-weight 一定要設置才會出現，部分圖片空心 / 實心 由 font-weight 決定
![](https://i.imgur.com/AmDSQYE.png)

![](https://i.imgur.com/2PcqTas.png)

---

[參考-CSS: 偽元素應用- input icon](https://ithelp.ithome.com.tw/articles/10200426)

## 實際應用 Ex. Collapse
展開時，前方符號為「-」
未展開時，前方符號為「+」
![](https://i.imgur.com/44oH0T4.gif)

### css
 \00a0 為空格 =  
```
.btnCommonProblem {
    width: 100%;
    text-align: left;
}

.btnCommonProblem[aria-expanded="false"]:before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f067 \00a0";
}

.btnCommonProblem[aria-expanded="true"]:before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f068 \00a0";
}
```

### HTML

```
<div class="container-fluid">
    <h4>常見問題</h4>
    <div class="row mt-4">
        <div class="col-12">
            <button class="btn btn-secondary btnCommonProblem" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false">
                常見問題1
            </button>
            <div class="collapse" id="collapseExample">
                <div class="card card-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                </div>
            </div>
        </div>
    </div>
</div>
```