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

## 前置作業
* 使用 加入 -> 用戶端程式庫 安裝 Font Awesome 的話記得要裝 webfonts

某次未顯示，出現框框，出現了以下錯誤訊息才發現少裝

GET http://localhost:44318/Library/font-awesome/webfonts/fa-regular-400.woff2 net::ERR_ABORTED 404

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


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

### 有些圖片 font-weight 一定要設置才會出現，部分圖片空心 / 實心 由 font-weight 決定


---

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

## 實際應用 Ex. Collapse
展開時，前方符號為「-」
未展開時，前方符號為「+」

### 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>