FONT AWESOME 免費的向量圖示字型

過去我們在處理網頁圖示 (Icon) 時,通常都會用圖片的方式來呈現,但這樣做有幾個缺點,一、圖檔的檔案較大,二、修改不易,三、一些常用如陰影之類的效果需要送 Photoshop 處理,四、點陣檔無法縮放。
Font Awesome 是一個 github 下的專案,他提供可縮放的向量圖示字型,使用上就像一般的字型,你可以透過簡單的 CSS 設定,來改變 Icon 的大小、顏色及各種 CSS 效果,為網頁增加趣味;它包含下列幾項優點:

  • 一個字型提供 369 個向量圖示 (未來可能會持續增加)
  • 可自由縮放
  • 可透過 CSS 控制
  • 不需要使用 Javascript
  • 完全免費 (授權方式)
  • 由於向量的特性,所以 Font Awesome 支援視網膜螢幕
  • 兼容 Bootstrap

如何使用?

Font Awesome 使用上也很簡單,你只要先到 github 下載 Font Awesome,同時將檔案解壓縮放在你的網站目錄下,然後開啟你的網頁,在 head 的標籤內加上

<link href="css/font-awesome.css" rel="stylesheet" type="text/css" />

之後在需要使用 icon 的地方加上 Font Awesome 的 class,例如:我們希望在 span 的標籤上加一個行事曆的 Icon,你可以如下設定

<span class="fa-calendar">Calendar</span>

延伸閱讀

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料