Font Awesome 圖標字體與CSS工具

Author Avatar
Yish 12月 04, 2016
  • 在其他設備中閱讀本文章

前陣子原本是在用 bootstrap 裡面的 Glyphicons,是挺不錯的,但缺點就是選擇蠻少的,所以找了找,這款 font awesome 可以滿足我目前的需求,當然他有提供額外的客製化和付費服務,如果有需求的人可以自己去 官方網站 詳細逛逛。

先到 CDN 載入 css 檔案

1
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

使用方法其實很簡單,例如說你想要用 rocket 這個圖標:

1
<i class="fa fa-rocket" aria-hidden="true"></i>

就是這樣,相當簡單,他每個圖標選定後都可以點進去看他在不同的尺寸下效果是什麼,尺寸的變化只要這樣:

1
2
3
4
5
<i class="fa fa-rocket fa-lg"></i>
<i class="fa fa-rocket fa-2x"></i>
<i class="fa fa-rocket fa-3x"></i>
<i class="fa fa-rocket fa-4x"></i>
<i class="fa fa-rocket fa-5x"></i>

他還有提供相當多的樣式跟操作方法,可以詳細讀 example