網頁上好用小圖使用CSS ICON 圖示框架Font Awesome

7 月 1, 2015 | CSS, | 0 comments

Font Awesome 的設計只需要簡單的應用Html語法,就可輕鬆在網頁加入ICON圖示。

過去網頁設計師,需要為了網頁的小圖示,需要親手設計ICON,更或者需要在網路搜尋找尋適用的ICON,總是為了這小ICON傷腦經,現在Font Awesome將提供我們,無數的ICON圖示給我們運用,而且簡單輕鬆添加在你的網頁上。

您可以將Font Awesome圖標使用在幾乎任何地方,只需要使用HTML class加入fa,空格後面再加上想要加上圖示名稱 。(圖示名稱可在Font Awesome官網搜尋到)


你的網頁加入Font Awesome

你可以選擇下載官方的font-awesome的js檔案,放置你的網站資料夾內做js連結,或更快的方式就是選擇以下,font-awesome 提供的CDN方式連結

使用Font Awesome提供的CDN

下面的程式碼貼到您網站的HTML標籤內。

了解更多參考:Get started with Font Awesome

ICON應用方式

 fa-camera-retro

ICON變化大小

 fa-lg
 fa-2x
 fa-3x
 fa-4x
 fa-5x

Font Awesome是使用字形方式顯示ICON,所以可以做到向量無限制的放大,若需要縮放到更大,可以設定字型大小,讓他照著字的大小去縮放。  

fa-camera-retro

ICON變化顏色

只需要設定CSS字體的顏色,ICON就會依照指定的顏色顯示。

 fa-camera-retro
 fa-camera-retro
 fa-camera-retro
 fa-camera-retro

DEMO | DOWNLOAD DEMO