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