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<head>標籤內。
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>

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

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
 
 
 
 

您也可能喜歡這些文章

Copyright © 2018 ucamc