Table of Contents

圖標(Icons)

向網頁中添加圖標最簡單的方式是使用圖標庫，再將指定圖標的名稱添加到內聯HTML元素（如或）， 一般圖標庫中的圖標採用的是向量圖標，可以使用CSS自行定義大小，顏色及陰影等，也不會有放大後的鋸齒狀問題。

Font Awesome 圖標

Font Awesome 5包含了超過1500個免費圖標及超過7000個付費圖標。要使用免費圖標可以選擇下載Font Awesome程式庫，也可以在Font Awesome上註冊帳戶，並獲得 KIT CODE代碼：
Font Awesome 註冊網站。
請將下列的1adb36782c更換為自行註冊後的KIT CODE代碼。

In [2]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
</head>
<body>

<!-- 插入圖標 -->
<i class="fas fa-clock"></i>

</body>
</html>

插入圖標

插入圖標的方式可以透過圖標名稱或是Unicode方式，詳細的圖標名稱及Unicode查詢網址如下： https://fontawesome.com/icons

In [4]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
</head>
<body>

<!-- 插入圖標 -->
<i class="fas fa-clock"></i>

<!-- 插入圖標 -->
<i class='fas'>&#xf017;</i>

</body>
</html>

更改圖標樣式

可以透過style屬性來更改圖標樣式，或是透過繼承圖標容器的樣式。可以更改的樣式包含字體大小、顏色及陰影。

In [5]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
</head>
<body>

<!--透過style來更改樣式 -->
<i class="fas fa-clock" 
   style="font-size:60px;color:blue">
</i>

<!--繼承圖標容器的樣式-->
<style>
#icon {
  font-size:60px;
  color:blue;
}
</style>

<span id="icon">
  <i class="fas fa-clock"></i>
</span>

</body>
</html>

更改圖標大小

Font Awesome 提供内建的類別來設定字體大小：

In [6]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>

</body>
</html>

圖標的特效類別

類別 效果
fa-border 圖標加框
fa-pull-right
fa-pull-left		 圖標靠右邊
圖標靠左邊
fa-rotate-* 旋轉圖標
*為旋轉的角度
fa-flip-horizontal
fa-flip-vertical		 圖標水平翻轉
圖標垂直翻轉
fa-spin
fa-pulse		 順時針旋轉動畫
分8段旋轉動畫
fa-fw 圖標固定寬度
In [24]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
</head>
<body class="fas">

<!-- 圖標加框 -->
<i class="fas fa-2x fa-clock fa-border"></i>

<!-- 圖標順時針旋轉 -->
<i class="fas fa-2x fa-clock fa-spin"></i>
<i class="fas fa-2x fa-spinner fa-spin"></i>

<!-- 圖標分8段旋轉 -->
<i class="fas fa-2x fa-clock fa-pulse"></i>
<i class="fas fa-2x fa-spinner fa-pulse"></i>

</body>
</html>
In [21]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
</head>
<body class="fas">

<!-- 旋轉圖標 -->
<i class="fas fa-hand-peace"></i>
<i class="fas fa-hand-peace fa-rotate-90"></i>
<i class="fas fa-hand-peace fa-rotate-180"></i>
<i class="fas fa-hand-peace fa-rotate-270"></i>

<span class="fa-stack fa-lg">
  <i class="fas fa-camera fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>

</body>
</html>
In [22]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
</head>
<body class="fas">

<!-- 翻轉圖標 -->
<i class="fas fa-hand-peace"></i>
<i class="fas fa-hand-peace fa-flip-horizontal"></i>
<i class="fas fa-hand-peace fa-flip-vertical"></i>

</body>
</html>

圖標的重疊

類別 效果
fa-stack 圖標加框
fa-stack-1x 正常尺寸的圖標
fa-stack-2x 2倍尺寸的圖標
fa-inverse 圖標顔色反向
In [37]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
</head>

<span class="fa-stack fa-lg">
  <i class="fas fas fa-motorcycle fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fas fas fas fa-dog fa-stack-1x"></i>
  <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="fas fas fa-home fa-stack-1x fa-inverse"></i>
</span>
</body>
</html>

Google 圖標

Google Material 圖標查詢

In [43]:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>

<i class="material-icons">android</i>
<i class="material-icons">access_time</i>
<i class="material-icons">home</i>

</body>
</html>
android access_time home

結合Google 與 Font Awesome圖標

In [51]:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/1adb36782c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

<span class="fa-stack fa-lg">
  <i class="fas fa-circle fa-stack-2x"></i>
  <i class="material-icons fa-stack-1x fa-inverse" style="margin-top:5px">android</i>
</span>

<span class="fa-stack fa-lg">
  <i class="material-icons fa-stack-1x" style="margin-top:5px">android</i>
  <i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
</body>
</html>
android android
🏠