# 用 CSS 取用 fontawesome 圖示

[Font Awesome](https://fontawesome.com/start) 是我蠻喜歡的圖示字型服務，因為它入手相當簡單，適合像我這種小白使用，圖示種類也蠻豐富可愛的。

最常見的用法是找到你要的圖示，比方說底下這個紅蘿蔔：
[https://fontawesome.com/v5/icons/carrot?s=solid](https://fontawesome.com/v5/icons/carrot?s=solid)

直接把它提供的 HTML 貼到想放的位置就可以了～

```html
    <i class="fas fa-carrot"></i>
``` 
一般像是按鈕或選單用到的圖示，只要貼上去就好啦！


> 巴特，又是那個巴特，如果今天想在每一個段落前都給它一個紅蘿蔔呢？

如果有十個段落、分別貼十次 `<i class="fas fa-carrot"></i>` 這樣也太落漆了吧？！

嘿嘿～ 這時候就要發揮它圖示字型的特長，使用 CSS content 來完成它：

```css
    p::before {
      font-family: "Font Awesome 5 Free"; 
      font-weight: 900; 
      content: "\f787";
    }
``` 
1. 這裡用了偽元素 `::before` 來把紅蘿蔔放在每個段落前
2. 注意 `font-family` 要設定正確版本，這裡是用免費版的，並且 `font-weight` 要設為 900，圖示才能正確顯示喔
3. `content` 裡的值在[圖示頁面](https://fontawesome.com/icons/carrot?s=solid)有顯示，填錯號碼就不是紅蘿蔔啦！

是不是真的很方便呢？

不過兔子其實不喜歡吃紅蘿蔔，也不適合吃太多紅蘿蔔，要像封面圖片的兔兔一樣多吃菜菜才好喲！

### 參考連結

- [Font Awesome](https://fontawesome.com/start)