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

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

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

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

 

你的網頁加入Font Awesome

 

你可以選擇下載官方的font-awesome.css檔案,放置你的網站資料夾內做CSS連結,或更快的方式就是選擇以下http連結
 
下面的程式碼貼到您網站的HTML<head>標籤內。
 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


ICON應用方式

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

 

 

ICON變化大小

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

 

 

 

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

 

<h1 style="font-size:30px;"><i class="fa fa-camera-retro"></i> fa-camera-retro<h1>

 

 

ICON變化顏色

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

<i class="fa fa-camera-retro" style="color:#F00;"></i> fa-camera-retro
<i class="fa fa-camera-retro" style="color: #06F;"></i> fa-camera-retro
<i class="fa fa-camera-retro" style="color: #093;"></i> fa-camera-retro
<i class="fa fa-camera-retro" style="color: #F93;"></i> fa-camera-retro
 
 
 
 

Posted in CSS

Find the last offers by SkyBet at www.bettingy.com BettingY.com Bonuses