White Bunny's Notes
用 CSS 取用 fontawesome 圖示

用 CSS 取用 fontawesome 圖示

White Bunny's photo
White Bunny
·

1 min read

Font Awesome 是我蠻喜歡的圖示字型服務，因為它入手相當簡單，適合像我這種小白使用，圖示種類也蠻豐富可愛的。

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

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

    <i class="fas fa-carrot"></i>

一般像是按鈕或選單用到的圖示，只要貼上去就好啦！

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

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

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

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

是不是真的很方便呢？

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

參考連結

CSS