CSS 圖示
透過使用圖示庫，可以輕鬆地將圖示新增到您的 HTML 頁面。
如何新增圖示
將圖示新增到 HTML 頁面的最簡單方法是使用圖示庫，例如 Font Awesome。
將指定圖示類的名稱新增到任何內聯 HTML 元素（如 <i> 或 <span>）。
以下圖示庫中的所有圖示都是可縮放的向量圖，可以透過 CSS 進行自定義（大小、顏色、陰影等）。
Font Awesome 圖示
要使用 Font Awesome 圖示，請訪問 fontawesome.com，登入並獲取程式碼，然後將其新增到 HTML 頁面的 <head> 部分。
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
閱讀更多關於如何開始使用 Font Awesome 的資訊，請參閱我們的 Font Awesome 5 教程。
注意：無需下載或安裝！
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
結果
有關所有 Font Awesome 圖示的完整參考，請訪問我們的 圖示參考。
Bootstrap 圖示
要使用 Bootstrap glyphicons，請在 HTML 頁面的 <head> 部分新增以下行：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
注意：無需下載或安裝！
示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
結果
Google 圖示
要使用 Google 圖示，請在 HTML 頁面的 <head> 部分新增以下行：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
注意：無需下載或安裝！
示例
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
結果
有關所有圖示的完整列表，請訪問我們的 圖示教程。
