如何使用 Font Awesome 圖標字體?

0
1678

網頁設計過程中,經常會遇到小圖標在手機上顯示比較模糊的問題,亦或是在 Retina 螢幕上顯示的大小正常,一旦放大螢幕後圖標又變得模糊不清,現在設計師們發現了一種不錯的解決方法,就是將圖標字體化。在許多 App 中也可以發現許多這種小 Icon(圖標)的應用,如分享、回覆、贊、返回、話題、訪問、箭頭等。

icon-font

使用圖標字體的優勢和劣勢

圖標字體除了圖像清晰度之外,比起圖片還有哪些優勢呢?
1、輕量性:一個圖標字體比一系列的圖像(特別是在 Retina 螢幕中使用雙倍圖像)要小。一旦圖標字體載入後,圖標就會馬上渲染出來,不需要下載一個圖片。可以減少 HTTP 請求,還可以配合 HTML5 離線儲存做性能優化。

2、靈活性:圖標字體可以透過 font-size 屬性設置其任何大小,還可以加各種文字效果,包括顏色、懸停狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用圖片的話,必須得為每個不同大小和不同效果的圖像輸出一個不同文件。

3、兼容性:網頁字體支援所有現代瀏覽器,包括 IE 舊版本。詳細兼容性可以點選這裡

目前已有許多免費的圖標字體資源可下載。Font Awesome 就是現在相當熱門的 Web Symbols 的圖標字體庫。這套圖標字體庫聚集了 200 多餘款圖標樣式,除了包括 Twitter Boostrap 的預設圖標外,還有社群網站圖標、Web 應用程式圖標和編輯器圖標等等,可以免費用於商業項目。

下載 Font Awesome 檔案

Font Awesome 的安裝和使用方式也很簡單。首先,你必須先去官方網站下載最新的版本。
Font Awesome:http://fortawesome.github.io/Font-Awesome

Font-Awesome如果只使用 CSS,僅須拷貝 css 與 fonts 兩個資料夾到你的目錄底下即可

接著在 <head> 之中加入 CSS 語法

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

記得把路徑改為自己的路徑,另外提醒要把 fontawesome-webfont 放在同一層,再引入 CSS 檔才有用喔!

如何在頁面中使用

使用只須要在頁面當中加入以下範例語法:

<i class="fa fa-camera-retro"></i> fa-camera-retro

頁面就會產生 fa-camera-retro
是不是很簡單呢?