網頁圖示 - 快速指南

網頁圖示 - 簡介

圖示是用於表示網頁上特定操作或功能的符號。圖示用於文件和應用程式，可以是可選擇的或不可選擇的。例如，我們在應用程式按鈕上看到的影像都是圖示，這些按鈕是可以選擇的。同樣，當我們使用圖示作為公司徽標時，它通常是不可選擇的。

在 Windows 環境中，如果我們靜音系統音量，它將透過圖標表示，如下所示。

使用網頁圖示，我們可以表示載入頁面、停用選項、連結、重定向等。這些圖示可以翻轉、旋轉、調整大小、新增邊框、反轉和著色。

圖示字型

圖示字型包含符號和字形。載入所需的字型後，可以使用該字型提供的任何圖示，使用圖示的類名。我們還可以使用 CSS 屬性為圖示應用不同的顏色並調整其大小。有幾個圖示庫（字型）提供圖示。本教程重點介紹三種主要的字型，即：

Font Awesome
Bootstrap Glyphicons
Google 的 Material Icons

Font Awesome

此字型提供 519 個免費的可縮放向量圖示。此庫完全免費，個人和商業用途均可。這些圖示可以輕鬆自定義。最初，它們是為 Bootstrap 開發的。

Bootstrap Glyphicons

這是一個單色圖示庫，以光柵影像格式、向量影像格式和字型格式提供。它以字型格式提供超過 250 個字形。您可以在您的 Web 專案中使用這些字型。這些圖示不是免費的，但是您可以在基於 Bootstrap 的專案中使用它們而無需購買。

Google 的 Material Icons

Google 提供了大約 750 個根據“材料設計指南”設計的圖示，這些圖示被稱為Material Design圖示。這些圖示簡單易用，並支援所有現代 Web 瀏覽器。由於這些圖示是基於向量的，因此它們也是可縮放的。要使用這些圖示，我們必須載入字型（庫）material-icons。

Font Awesome 圖示

Font Awesome 圖示庫提供 519 個免費的可縮放向量圖示。此庫對個人和商業用途完全免費。最初為 Bootstrap 設計，這些圖示可以輕鬆自定義。

載入字型庫

要載入 Font Awesome 庫，請複製並貼上以下行到網頁的<head>部分。

<head>
   <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
</head>

使用圖示

Font Awesome 提供了多種圖示。選擇其中一個，並將圖示類名新增到<body>標籤內的任何 HTML 元素中。在下面的示例中，我們使用了印度貨幣的圖示。

即時演示

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
   </head>
	
   <body>
      <i class = "fa fa-inr"></i>
   </body>
	
</html>

它將產生以下輸出：

定義大小

您可以透過使用 CSS 定義其大小並將其與類名一起使用來增加或減小圖示的大小，如下所示。在給定的示例中，我們已將大小宣告為 6em。

即時演示

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.mysize {font-size: 10em;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr mysize"></i>
   </body>
	
</html>

它將產生以下輸出：

定義顏色

就像大小一樣，您可以使用 CSS 定義圖示的顏色。以下示例顯示瞭如何更改印度貨幣圖示的顏色。

即時演示

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
		
      <style>
         i.custom {font-size: 6em; color: red;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-inr custom"></i>
   </body>
	
</html>

類別列表

Font Awesome 在以下類別中提供 519 個圖示：

Web 應用程式圖示
手勢圖示
交通圖示
性別圖示
檔案型別圖示
載入動畫圖示
表單控制元件圖示
支付圖示
圖表圖示
貨幣圖示
文字編輯器圖示
方向圖示
播放器圖示
品牌圖示

要使用這些圖示中的任何一個，您必須將本章中給出的程式中的類名替換為所需圖示的類名。在本單元（Font Awesome）的後續章節中，我們按類別解釋了各種 Font Awesome 圖示的使用和各自的輸出。

Font Awesome - Web 應用程式圖示

本章解釋了 Font Awesome Web 應用程式圖示的使用。假設custom是我們在其中定義大小和顏色的 CSS 類名，如下面的示例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome Web 應用程式圖示的使用和結果。將上面程式的<body>標籤替換為表中給出的程式碼，以獲得相應的輸出：

用法	結果
<i class= "fa fa-adjust custom"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-archive custom"></i>
<i class="fa fa-area-chart custom"></i>
<i class="fa fa-arrows custom"></i>
<i class="fa fa-arrows-h custom"></i>
<i class="fa fa-arrows-v custom"></i>
<i class="fa fa-asterisk custom"></i>
<i class="fa fa-at custom"></i>
<i class="fa fa-automobile custom"></i>
<i class="fa fa-balance-scale custom"></i>
<i class="fa fa-ban custom"></i>
<i class="fa fa-bank custom"></i>
<i class="fa fa-bar-chart custom"></i>
<i class="fa fa-bar-chart-o custom"></i>
<i class="fa fa-barcode custom"></i>
<i class="fa fa-bars custom"></i>
<i class="fa fa-bed custom"></i>
<i class="fa fa-beer custom"></i>
<i class="fa fa-bell custom"></i>
<i class="fa fa-wrench custom"></i>
<i class="fa fa-bell-o custom"></i>
<i class="fa fa-bell-slash custom"></i>
<i class="fa fa-bell-slash-o custom"></i>
<i class="fa fa-bicycle custom"></i>
<i class="fa fa-battery-0 custom"></i>
<i class="fa fa-battery-1 custom"></i>
<i class="fa fa-battery-2 custom"></i>
<i class="fa fa-battery-3 custom"></i>
<i class="fa fa-battery-4 custom"></i>
<i class="fa fa-battery-empty custom"></i>
<i class="fa fa-battery-quarter custom"></i>
<i class="fa fa-battery-half custom"></i>
<i class="fa fa-battery-three-quarters custom"></i>
<i class="fa fa-battery-full custom"></i>
<i class="fa fa-birthday-cake custom"></i>
<i class="fa fa-bolt custom"></i>
<i class="fa fa-bomb custom"></i>
<i class="fa fa-book custom"></i>
<i class="fa fa-bookmark custom"></i>
<i class="fa fa-bookmark-o custom"></i>
<i class="fa fa-briefcase custom"></i>
<i class="fa fa-bug custom"></i>
<i class="fa fa-building custom"></i>
<i class="fa fa-building-o custom"></i>
<i class="fa fa-bullhorn custom"></i>
<i class="fa fa-bullseye custom"></i>
<i class="fa fa-bus custom"></i>
<i class="fa fa-cab custom"></i>
<i class="fa fa-video-camera custom"></i>
<i class="fa fa-calendar custom"></i>
<i class="fa fa-calendar-check-o custom"></i>
<i class="fa fa-calendar-minus-o custom"></i>
<i class="fa fa-calendar-o custom"></i>
<i class="fa fa-calendar-plus-o custom"></i>
<i class="fa fa-calendar-times-o custom"></i>
<i class="fa fa-camera custom"></i>
<i class="fa fa-camera-retro custom"></i>
<i class="fa fa-car custom"></i>
<i class="fa fa-cc custom"></i>
<i class="fa fa-caret-square-o-down custom"></i>
<i class="fa fa-caret-square-o-left custom"></i>
<i class="fa fa-caret-square-o-right custom"></i>
<i class="fa fa-caret-square-o-up custom"></i>
<i class="fa fa-cart-arrow-down custom"></i>
<i class="fa fa-cart-plus custom"></i>
<i class="fa fa-certificate custom"></i>
<i class="fa fa-child custom"></i>
<i class="fa fa-check custom"></i>
<i class="fa fa-check-circle custom"></i>
<i class="fa fa-check-circle-o custom"></i>
<i class="fa fa-check-square custom"></i>
<i class="fa fa-check-square-o custom"></i>
<i class="fa fa-circle custom"></i>
<i class="fa fa-circle-o custom"></i>
<i class="fa fa-circle-o-notch custom"></i>
<i class="fa fa-circle-thin custom"></i>
<i class="fa fa-clock-o custom"></i>
<i class="fa fa-clone custom"></i>
<i class="fa fa-close custom"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-cloud-download custom"></i>
<i class="fa fa-cloud-upload custom"></i>
<i class="fa fa-code custom"></i>
<i class="fa fa-code-fork custom"></i>
<i class="fa fa-coffee custom"></i>
<i class="fa fa-cog custom"></i>
<i class="fa fa-cogs custom"></i>
<i class="fa fa-comment custom"></i>
<i class="fa fa-comment-o custom"></i>
<i class="fa fa-commenting custom"></i>
<i class="fa fa-commenting-o custom"></i>
<i class="fa fa-comments custom"></i>
<i class="fa fa-comments-o custom"></i>
<i class="fa fa-compass custom"></i>
<i class="fa fa-copyright custom"></i>
<i class="fa fa-creative-commons custom"></i>
<i class="fa fa-credit-card custom"></i>
<i class="fa fa-crop custom"></i>
<i class="fa fa-crosshairs custom"></i>
<i class="fa fa-cube custom"></i>
<i class="fa fa-cubes custom"></i>
<i class="fa fa-cutlery custom"></i>
<i class="fa fa-dashboard custom"></i>
<i class="fa fa-database custom"></i>
<i class="fa fa-desktop custom"></i>
<i class="fa fa-diamond custom"></i>
<i class="fa fa-dot-circle-o custom"></i>
<i class="fa fa-download custom"></i>
<i class="fa fa-edit custom"></i>
<i class="fa fa-ellipsis-h custom"></i>
<i class="fa fa-ellipsis-v custom"></i>
<i class="fa fa-envelope custom"></i>
<i class="fa fa-envelope-o custom"></i>
<i class="fa fa-envelope-square custom"></i>
<i class="fa fa-eraser custom"></i>
<i class="fa fa-exchange custom"></i>
<i class="fa fa-exclamation custom"></i>
<i class="fa fa-exclamation-circle custom"></i>
<i class="fa fa-exclamation-triangle custom"></i>
<i class="fa fa-external-link custom"></i>
<i class="fa fa-external-link-square custom"></i>
<i class="fa fa-eye custom"></i>
<i class="fa fa-eye-slash custom"></i>
<i class="fa fa-eyedropper custom"></i>
<i class="fa fa-fax custom"></i>
<i class="fa fa-feed custom"></i>
<i class="fa fa-female custom"></i>
<i class="fa fa-fighter-jet custom"></i>
<i class="fa fa-file-archive-o custom"></i>
<i class="fa fa-file-audio-o custom"></i>
<i class="fa fa-file-code-o custom"></i>
<i class="fa fa-file-excel-o custom"></i>
<i class="fa fa-volume-down custom"></i>
<i class="fa fa-file-movie-o custom"></i>
<i class="fa fa-file-pdf-o custom"></i>
<i class="fa fa-file-photo-o custom"></i>
<i class="fa fa-file-picture-o custom"></i>
<i class="fa fa-file-powerpoint-o custom"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-video-o custom"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-video-o custom"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-zip-o custom"></i>
<i class="fa fa-film custom"></i>
<i class="fa fa-filter custom"></i>
<i class="fa fa-fire custom"></i>
<i class="fa fa-fire-extinguisher custom"></i>
<i class="fa fa-flag custom"></i>
<i class="fa fa-flag-checkered custom"></i>
<i class="fa fa-flag-o custom"></i>
<i class="fa fa-flash custom"></i>
<i class="fa fa-flask custom"></i>
<i class="fa fa-flask custom"></i>
<i class="fa fa-folder custom"></i>
<i class="fa fa-folder-o custom"></i>
<i class="fa fa-folder-open custom"></i>
<i class="fa fa-folder-open-o custom"></i>
<i class="fa fa-frown-o custom"></i>
<i class="fa fa-volume-off custom"></i>
<i class="fa fa-gamepad custom"></i>
<i class="fa fa-gavel custom"></i>
<i class="fa fa-gear custom"></i>
<i class="fa fa-gears custom"></i>
<i class="fa fa-gift custom"></i>
<i class="fa fa-glass custom"></i>
<i class="fa fa-globe custom"></i>
<i class="fa fa-graduation-cap custom"></i>
<i class="fa fa-group custom"></i>
<i class="fa fa-hand-grab-o custom"></i>
<i class="fa fa-hand-lizard-o custom"></i>
<i class="fa fa-hand-paper-o custom"></i>
<i class="fa fa-hand-peace-o custom"></i>
<i class="fa fa-hand-pointer-o custom"></i>
<i class="fa fa-hand-rock-o custom"></i>
<i class="fa fa-hand-scissors-o custom"></i>
<i class="fa fa-hand-spock-o custom"></i>
<i class="fa fa-hand-paper-o custom"></i>
<i class="fa fa-hdd-o custom"></i>
<i class="fa fa-headphones custom"></i>
<i class="fa fa-heart custom"></i>
<i class="fa fa-heart-o custom"></i>
<i class="fa fa-heartbeat custom"></i>
<i class="fa fa-history custom"></i>
<i class="fa fa-home custom"></i>
<i class="fa fa-hotel custom"></i>
<i class="fa fa-hourglass custom"></i>
<i class="fa fa-hourglass-start custom"></i>
<i class="fa fa-hourglass-half custom"></i>
<i class="fa fa-hourglass-end custom"></i>
<i class="fa fa-i-cursor custom"></i>
<i class="fa fa-image custom"></i>
<i class="fa fa-inbox custom"></i>
<i class="fa fa-industry custom"></i>
<i class="fa fa-info custom"></i>
<i class="fa fa-info-circle custom"></i>
<i class="fa fa-institution custom"></i>
<i class="fa fa-key custom"></i>
<i class="fa fa-keyboard-o custom"></i>
<i class="fa fa-language custom"></i>
<i class="fa fa-laptop custom"></i>
<i class="fa fa-leaf custom"></i>
<i class="fa fa-legal custom"></i>
<i class="fa fa-lemon-o custom"></i>
<i class="fa fa-level-down custom"></i>
<i class="fa fa-level-up custom"></i>
<i class="fa fa-life-bouy custom"></i>
<i class="fa fa-life-ring custom"></i>
<i class="fa fa-life-saver custom"></i>
<i class="fa fa-lightbulb-o custom"></i>
<i class="fa fa-line-chart custom"></i>
<i class="fa fa-location-arrow custom"></i>
<i class="fa fa-lock custom"></i>
<i class="fa fa-magic custom"></i>
<i class="fa fa-magnet custom"></i>
<i class="fa fa-mail-forward custom"></i>
<i class="fa fa-mail-reply custom"></i>
<i class="fa fa-mail-reply-all custom"></i>
<i class="fa fa-male custom"></i>
<i class="fa fa-map custom"></i>
<i class="fa fa-map-marker custom"></i>
<i class="fa fa-map-o custom"></i>
<i class="fa fa-map-pin custom"></i>
<i class="fa fa-map-signs custom"></i>
<i class="fa fa-meh-o custom"></i>
<i class="fa fa-microphone custom"></i>
<i class="fa fa-microphone-slash custom"></i>
<i class="fa fa-minus custom"></i>
<i class="fa fa-minus-circle custom"></i>
<i class="fa fa-minus-square custom"></i>
<i class="fa fa-minus-square-o custom"></i>
<i class="fa fa-mobile custom"></i>
<i class="fa fa-money custom"></i>
<i class="fa fa-moon-o custom"></i>
<i class="fa fa-mortar-board custom"></i>
<i class="fa fa-motorcycle custom"></i>
<i class="fa fa-mouse-pointer custom"></i>
<i class="fa fa-music custom"></i>
<i class="fa fa-users custom"></i>
<i class="fa fa-object-group custom"></i>
<i class="fa fa-object-ungroup custom"></i>
<i class="fa fa-paint-brush custom"></i>
<i class="fa fa-paper-plane custom"></i>
<i class="fa fa-paper-plane-o custom"></i>
<i class="fa fa-paw custom"></i>
<i class="fa fa-pencil custom"></i>
<i class="fa fa-pencil-square custom"></i>
<i class="fa fa-pencil-square-o custom"></i>
<i class="fa fa-phone custom"></i>
<i class="fa fa-phone custom"></i>
<i class="fa fa-photo custom"></i>
<i class="fa fa-picture-o custom"></i>
<i class="fa fa-pie-chart custom"></i>
<i class="fa fa-plane custom"></i>
<i class="fa fa-volume-up custom"></i>
<i class="fa fa-plus custom"></i>
<i class="fa fa-plus-circle custom"></i>
<i class="fa fa-plus-square custom"></i>
<i class="fa fa-plus-square-o custom"></i>
<i class="fa fa-power-off custom"></i>
<i class="fa fa-print custom"></i>
<i class="fa fa-puzzle-piece custom"></i>
<i class="fa fa-qrcode custom"></i>
<i class="fa fa-question custom"></i>
<i class="fa fa-question-circle custom"></i>
<i class="fa fa-quote-left custom"></i>
<i class="fa fa-quote-right custom"></i>
<i class="fa fa-random custom"></i>
<i class="fa fa-recycle custom"></i>
<i class="fa fa-refresh custom"></i>
<i class="fa fa-registered custom"></i>
<i class="fa fa-remove custom"></i>
<i class="fa fa-reorder custom"></i>
<i class="fa fa-reply custom"></i>
<i class="fa fa-reply-all custom"></i>
<i class="fa fa-retweet custom"></i>
<i class="fa fa-road custom"></i>
<i class="fa fa-anchor custom"></i>
<i class="fa fa-rss custom"></i>
<i class="fa fa-rss-square custom"></i>
<i class="fa fa-search custom"></i>
<i class="fa fa-search-minus custom"></i>
<i class="fa fa-search-plus custom"></i>
<i class="fa fa-send custom"></i>
<i class="fa fa-send-o custom"></i>
<i class="fa fa-server custom"></i>
<i class="fa fa-share custom"></i>
<i class="fa fa-share-alt custom"></i>
<i class="fa fa-share-alt-square custom"></i>
<i class="fa fa-share-alt-o custom"></i>
<i class="fa fa-shield custom"></i>
<i class="fa fa-ship custom"></i>
<i class="fa fa-shopping-cart custom"></i>
<i class="fa fa-sign-in custom"></i>
<i class="fa fa-sign-out custom"></i>
<i class="fa fa-signal custom"></i>
<i class="fa fa-sitemap custom"></i>
<i class="fa fa-sliders custom"></i>
<i class="fa fa-smile-o custom"></i>
<i class="fa fa-warning custom"></i>
<i class="fa fa-sort custom"></i>
<i class="fa fa-sort-alpha-asc custom"></i>
<i class="fa fa-sort-alpha-desc custom"></i>
<i class="fa fa-sort-asc custom"></i>
<i class="fa fa-sort-desc custom"></i>
<i class="fa fa-sort-down custom"></i>
<i class="fa fa-sort-numeric-asc custom"></i>
<i class="fa fa-sort-numeric-desc custom"></i>
<i class="fa fa-sort-up custom"></i>
<i class="fa fa-space-shuttle custom"></i>
<i class="fa fa-spinner custom"></i>
<i class="fa fa-spoon custom"></i>
<i class="fa fa-square custom"></i>
<i class="fa fa-square-o custom"></i>
<i class="fa fa-star custom"></i>
<i class="fa fa-star-half custom"></i>
<i class="fa fa-star-half-empty custom"></i>
<i class="fa fa-star-half-full custom"></i>
<i class="fa fa-star-half-o custom"></i>
<i class="fa fa-star-o custom"></i>
<i class="fa fa-sticky-note custom"></i>
<i class="fa fa-sticky-note-o custom"></i>
<i class="fa fa-street-view custom"></i>
<i class="fa fa-suitcase custom"></i>
<i class="fa fa-sun-o custom"></i>
<i class="fa fa-support custom"></i>
<i class="fa fa-tablet custom"></i>
<i class="fa fa-tachometer custom"></i>
<i class="fa fa-tag custom"></i>
<i class="fa fa-tags custom"></i>
<i class="fa fa-tasks custom"></i>
<i class="fa fa-taxi custom"></i>
<i class="fa fa-television custom"></i>
<i class="fa fa-terminal custom"></i>
<i class="fa fa-thumb-tack custom"></i>
<i class="fa fa-thumbs-down custom"></i>
<i class="fa fa-ticket custom"></i>
<i class="fa fa-times custom"></i>
<i class="fa fa-times-circle custom"></i>
<i class="fa fa-times-circle-o custom"></i>
<i class="fa fa-tint custom"></i>
<i class="fa fa-toggle-down custom"></i>
<i class="fa fa-toggle-left custom"></i>
<i class="fa fa-toggle-off custom"></i>
<i class="fa fa-toggle-on custom"></i>
<i class="fa fa-toggle-right custom"></i>
<i class="fa fa-toggle-up custom"></i>
<i class="fa fa-trademark custom"></i>
<i class="fa fa-tras custom"></i>
<i class="fa fa-trash-o custom"></i>
<i class="fa fa-tree custom"></i>
<i class="fa fa-trophy custom"></i>
<i class="fa fa-truck custom"></i>
<i class="fa fa-wheelchair custom"></i>
<i class="fa fa-tv custom"></i>
<i class="fa fa-umbrella custom"></i>
<i class="fa fa-university custom"></i>
<i class="fa fa-unlock custom"></i>
<i class="fa fa-unlock-alt custom"></i>
<i class="fa fa-unsorted custom"></i>
<i class="fa fa-upload custom"></i>
<i class="fa fa-user custom"></i>
<i class="fa fa-user-plus custom"></i>
<i class="fa fa-user-secret custom"></i>
<i class="fa fa-user-times custom"></i>

Font Awesome - 手勢圖示

本章解釋了 Font Awesome 手部圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 手部圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-hand-rock-o custom"></i>
<i class="fa fa-hand-o-left custom"></i>
<i class="fa fa-hand-paper-o custom"></i>
<i class="fa fa-hand-rock-o custom"></i>
<i class="fa fa-hand-stop-o custom"></i>
<i class="fa fa-thumbs-o-up custom"></i>
<i class="fa fa-hand-lizard-o custom"></i>
<i class="fa fa-hand-o-right custom"></i>
<i class="fa fa-hand-peace-o custom"></i>
<i class="fa fa-hand-scissors-o custom"></i>
<i class="fa fa-thumbs-down custom"></i>
<i class="fa fa-thumbs-up custom"></i>
<i class="fa fa-hand-o-up custom"></i>
<i class="fa fa-hand-pointer-o custom"></i>
<i class="fa fa-hand-spock-o custom"></i>
<i class="fa fa-thumbs-o-down custom"></i>

Font Awesome - 交通圖示

本章解釋了 Font Awesome 交通圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 交通圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-ambulance custom"></i>
<i class="fa fa-automobile custom"></i>
<i class="fa fa-bicycle custom"></i>
<i class="fa fa-bus custom"></i>
<i class="fa fa-cab custom"></i>
<i class="fa fa-car custom"></i>
<i class="fa fa-fighter-jet custom"></i>
<i class="fa fa-motorcycle custom"></i>
<i class="fa fa-plane custom"></i>
<i class="fa fa-rocket custom"></i>
<i class="fa fa-ship custom"></i>
<i class="fa fa-space-shuttle custom"></i>
<i class="fa fa-subway custom"></i>
<i class="fa fa-taxi custom"></i>
<i class="fa fa-train custom"></i>
<i class="fa fa-truck custom"></i>
<i class="fa fa-wheelchair custom"></i>

Font Awesome - 性別圖示

本章解釋了 Font Awesome 性別圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 性別圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-genderless custom"></i>
<i class="fa fa-intersex custom"></i>
<i class="fa fa-mars custom"></i>
<i class="fa fa-mars-double custom"></i>
<i class="fa fa-mars-stroke custom"></i>
<i class="fa fa-mars-stroke-h custom"></i>
<i class="fa fa-mars-stroke-v custom"></i>
<i class="fa fa-mercury custom"></i>
<i class="fa fa-neuter custom"></i>
<i class="fa fa-transgender custom"></i>
<i class="fa fa-transgender-alt custom"></i>
<i class="fa fa-venus custom"></i>
<i class="fa fa-venus-double custom"></i>
<i class="fa fa-venus-mars custom"></i>

Font Awesome - 檔案型別圖示

本章解釋了 Font Awesome 檔案型別圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

即時演示

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 檔案型別圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-file custom"></i>
<i class="fa fa-file-archive-o custom"></i>
<i class="fa fa-file-audio-o custom"></i>
<i class="fa fa-file-code-o custom"></i>
<i class="fa fa-file-excel-o custom"></i>
<i class="fa fa-file-image-o custom"></i>
<i class="fa fa-file-movie-o custom"></i>
<i class="fa fa-file-o custom"></i>
<i class="fa fa-file-pdf-o custom"></i>
<i class="fa fa-file-photo-o custom"></i>
<i class="fa fa-file-picture-o custom"></i>
<i class="fa fa-file-powerpoint-o custom"></i>
<i class="fa fa-file-video-o custom"></i>
<i class="fa fa-file-word-o custom"></i>
<i class="fa fa-file-zip-o custom"></i>
<i class="fa fa-file-sound-o custom"></i>
<i class="fa fa-file-text custom"></i>
<i class="fa fa-file-text-o custom"></i>

Font Awesome - 載入動畫圖示

本章解釋了 Font Awesome 載入動畫圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 載入動畫圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-circle-o-notch custom"></i>
<i class="fa fa-cog custom"></i>
<i class="fa fa-gear custom"></i>
<i class="fa fa-refresh custom"></i>
<i class="fa fa-spinner custom"></i>

Font Awesome - 表單控制元件圖示

本章解釋了 Font Awesome 表單控制元件圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 表單控制元件圖示的使用和結果。將上述程式的 <body> 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-check-square custom"></i>
<i class="fa fa-check-square-o custom"></i>
<i class="fa fa-circle custom"></i>
<i class="fa fa-circle-o custom"></i>
<i class="fa fa-dot-circle-o custom"></i>
<i class="fa fa-minus-square custom"></i>
<i class="fa fa-minus-square-o custom"></i>
<i class="fa fa-plus-square custom"></i>
<i class="fa fa-plus-square-o custom"></i>
<i class="fa fa-square custom"></i>
<i class="fa fa-square-o custom"></i>

Font Awesome - 支付圖示

本章解釋了 Font Awesome 支付圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 支付圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-cc-amex custom"></i>
<i class="fa fa-cc-diners-club custom"></i>
<i class="fa fa-cc-discover custom"></i>
<i class="fa fa-cc-jcb custom"></i>
<i class="fa fa-cc-mastercard custom"></i>
<i class="fa fa-cc-paypal custom"></i>
<i class="fa fa-cc-stripe custom"></i>
<i class="fa fa-cc-visa custom"></i>
<i class="fa fa-credit-card custom"></i>

Font Awesome - 圖表圖示

本章解釋了 Font Awesome 圖表圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel="stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 圖表圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-area-chart custom"></i>
<i class="fa fa-bar-chart custom"></i>
<i class="fa fa-bar-chart-o custom"></i>
<i class="fa fa-line-chart custom"></i>
<i class="fa fa-pie-chart custom"></i>

Font Awesome - 貨幣圖示

本章解釋了 Font Awesome 貨幣圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 貨幣圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-bitcoin custom"></i>
<i class="fa fa-btc custom"></i>
<i class="fa fa-cny custom"></i>
<i class="fa fa-dollar custom"></i>
<i class="fa fa-eur custom"></i>
<i class="fa fa-euro custom"></i>
<i class="fa fa-gbp custom"></i>
<i class="fa fa-gg custom"></i>
<i class="fa fa-gg-circle custom"></i>
<i class="fa fa-ils custom"></i>
<i class="fa fa-inr custom"></i>
<i class="fa fa-jpy custom"></i>
<i class="fa fa-krw custom"></i>
<i class="fa fa-money custom"></i>
<i class="fa fa-rmb custom"></i>
<i class="fa fa-rouble custom"></i>
<i class="fa fa-rub custom"></i>
<i class="fa fa-ruble custom"></i>
<i class="fa fa-rupee custom"></i>
<i class="fa fa-shekel custom"></i>
<i class="fa fa-sheqel custom"></i>
<i class="fa fa-try custom"></i>
<i class="fa fa-turkish-lira custom"></i>
<i class="fa fa-usd custom"></i>
<i class="fa fa-won custom"></i>
<i class="fa fa-yen custom"></i>

Font Awesome - 文字編輯器圖示

本章解釋了 Font Awesome 文字編輯器圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 文字編輯器圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-align-center custom"></i>
<i class="fa fa-align-justify custom"></i>
<i class="fa fa-align-left custom"></i>
<i class="fa fa-align-right custom"></i>
<i class="fa fa-bold custom"></i>
<i class="fa fa-chain custom"></i>
<i class="fa fa-chain-broken custom"></i>
<i class="fa fa-clipboard custom"></i>
<i class="fa fa-columns custom"></i>
<i class="fa fa-copy custom"></i>
<i class="fa fa-cut custom"></i>
<i class="fa fa-dedent custom"></i>
<i class="fa fa-eraser custom"></i>
<i class="fa fa-file custom"></i>
<i class="fa fa-file-o custom"></i>
<i class="fa fa-file-text custom"></i>
<i class="fa fa-file-text-o custom"></i>
<i class="fa fa-files-o custom"></i>
<i class="fa fa-floppy-o custom"></i>
<i class="fa fa-font custom"></i>
<i class="fa fa-header custom"></i>
<i class="fa fa-indent custom"></i>
<i class="fa fa-italic custom"></i>
<i class="fa fa-link custom"></i>
<i class="fa fa-list custom"></i>
<i class="fa fa-list-alt custom"></i>
<i class="fa fa-list-ol custom"></i>
<i class="fa fa-list-ul custom"></i>
<i class="fa fa-outdent custom"></i>
<i class="fa fa-paperclip custom"></i>
<i class="fa fa-paragraph custom"></i>
<i class="fa fa-paste custom"></i>
<i class="fa fa-repeat custom"></i>
<i class="fa fa-rotate-left custom"></i>
<i class="fa fa-rotate-right custom"></i>
<i class="fa fa-save custom"></i>
<i class="fa fa-scissors custom"></i>
<i class="fa fa-strikethrough custom"></i>
<i class="fa fa-subscript custom"></i>
<i class="fa fa-table custom"></i>
<i class="fa fa-text-heigh custom"></i>
<i class="fa fa-text-width custom"></i>
<i class="fa fa-th custom"></i>
<i class="fa fa-th-large custom"></i>
<i class="fa fa-th-list custom"></i>
<i class="fa fa-underline custom"></i>
<i class="fa fa-undo custom"></i>
<i class="fa fa-unlink custom"></i>

Font Awesome - 方向圖示

本章解釋了 Font Awesome 方向圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 方向圖示的使用和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="fa fa-angle-double-down custom" ></i>
<i class="fa fa-angle-double-left custom" ></i>
<i class="fa fa-angle-double-right custom" ></i>
<i class="fa fa-angle-double-up custom" ></i>
<i class="fa fa-angle-down custom" ></i>
<i class="fa fa-angle-left custom" ></i>
<i class="fa fa-angle-right custom" ></i>
<i class="fa fa-angle-up custom" ></i>
<i class="fa fa-arrow-circle-down custom" ></i>
<i class="fa fa-arrow-circle-left custom" ></i>
<i class="fa fa-arrow-circle-right custom" ></i>
<i class="fa fa-arrow-circle-up custom" ></i>
<i class="fa fa-arrow-circle-o-down custom" ></i>
<i class="fa fa-arrow-circle-o-left custom" ></i>
<i class="fa fa-arrow-circle-o-right custom" ></i>
<i class="fa fa-arrow-circle-o-up custom" ></i>
<i class="fa fa-arrow-down custom" ></i>
<i class="fa fa-arrow-left custom" ></i>
<i class="fa fa-arrow-right custom" ></i>
<i class="fa fa-arrow-up custom" ></i>
<i class="fa fa-arrows custom" ></i>
<i class="fa fa-arrows-alt custom" ></i>
<i class="fa fa-arrows-h custom" ></i>
<i class="fa fa-arrows-v custom" ></i>
<i class="fa fa-caret-down custom"></i>
<i class="fa fa-caret-left custom"></i>
<i class="fa fa-caret-right custom"></i>
<i class="fa fa-caret-up custom"></i>
<i class="fa fa-caret-square-o-down custom"></i>
<i class="fa fa-caret-square-o-left custom"></i>
<i class="fa fa-caret-square-o-right custom"></i>
<i class="fa fa-caret-square-o-up custom"></i>
<i class="fa fa-chevron-circle-down custom"></i>
<i class="fa fa-chevron-circle-left custom"></i>
<i class="fa fa-chevron-circle-right custom"></i>
<i class="fa fa-chevron-circle-up custom"></i>
<i class="fa fa-chevron-down custom"></i>
<i class="fa fa-chevron-left custom"></i>
<i class="fa fa-chevron-right custom"></i>
<i class="fa fa-chevron-up custom"></i>
<i class="fa fa-hand-o-down custom"></i>
<i class="fa fa-hand-o-left custom"></i>
<i class="fa fa-hand-o-right custom"></i>
<i class="fa fa-hand-o-up custom"></i>
<i class="fa fa-long-arrow-down custom"></i>
<i class="fa fa-long-arrow-left custom"></i>
<i class="fa fa-long-arrow-right custom"></i>
<i class="fa fa-long-arrow-up custom"></i>
<i class="fa fa-toggle-down custom"></i>
<i class="fa fa-toggle-left custom"></i>
<i class="fa fa-toggle-right custom"></i>
<i class="fa fa-toggle-up custom"></i>
<i class="fa fa-exchange custom"></i>

Font Awesome - 播放器圖示

本章解釋了 Font Awesome 影片播放器圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下面的示例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 影片播放器圖示的使用方法及其結果。將上面程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	圖示
<i class="fa fa-arrows-alt custom"></i>
<i class="fa fa-backward custom"></i>
<i class="fa fa-compress custom"></i>
<i class="fa fa-eject custom"></i>
<i class="fa fa-expand custom"></i>
<i class="fa fa-fast-backward custom"></i>
<i class="fa fa-fast-forward custom"></i>
<i class="fa fa-forward custom"></i>
<i class="fa fa-play-circle custom"></i>
<i class="fa fa-play-circle-o custom"></i>
<i class="fa fa-random custom"></i>
<i class="fa fa-step-backward custom"></i>
<i class="fa fa-stop custom"></i>
<i class="fa fa-pause custom"></i>
<i class="fa fa-play custom"></i>
<i class="fa fa-youtube-play custom"></i>

Font Awesome - 品牌圖示

本章解釋了 Font Awesome 品牌圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下面的示例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 品牌圖示的使用方法及其結果。將上面程式的 <body> 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	圖示
<i class="fa fa-500px custom"></i>
<i class="fa fa-amazon custom"></i>
<i class="fa fa-android custom"></i>
<i class="fa fa-angellist custom"></i>
<i class="fa fa-adn custom"></i>
<i class="fa fa-apple custom"></i>
<i class="fa fa-behance custom"></i>
<i class="fa fa-behance-square custom"></i>
<i class="fa fa-bitbucket custom"></i>
<i class="fa fa-bitbucket-square custom"></i>
<i class="fa fa-btc custom"></i>
<i class="fa fa-black-tie custom"></i>
<i class="fa fa-btc custom"></i>
<i class="fa fa-buysellads custom"></i>
<i class="fa fa-cc-amex custom"></i>
<i class="fa fa-cc-diners-club custom"></i>
<i class="fa fa-cc-discover custom"></i>
<i class="fa fa-cc-jcb custom"></i>
<i class="fa fa-cc-mastercard custom"></i>
<i class="fa fa-cc-paypal custom"></i>
<i class="fa fa-cc-stripe custom"></i>
<i class="fa fa-cc-visa custom"></i>
<i class="fa fa-chrome custom"></i>
<i class="fa fa-codepen custom"></i>
<i class="fa fa-connectdevelop custom"></i>
<i class="fa fa-contao custom"></i>
<i class="fa fa-css3 custom"></i>
<i class="fa fa-dashcube custom"></i>
<i class="fa fa-delicious custom"></i>
<i class="fa fa-deviantart custom"></i>
<i class="fa fa-digg custom"></i>
<i class="fa fa-dribbble custom"></i>
<i class="fa fa-dropbox custom"></i>
<i class="fa fa-drupal custom"></i>
<i class="fa fa-empire custom"></i>
<i class="fa fa-expeditedssl custom"></i>
<i class="fa fa-facebook custom"></i>
<i class="fa fa-facebook-f custom"></i>
<i class="fa fa-facebook-official custom"></i>
<i class="fa fa-facebook-square custom"></i>
<i class="fa fa-firefox custom"></i>
<i class="fa fa-flickr custom"></i>
<i class="fa fa-fonticons custom"></i>
<i class="fa fa-forumbee custom"></i>
<i class="fa fa-foursquare custom"></i>
<i class="fa fa-ge custom"></i>
<i class="fa fa-get-pocket custom"></i>
<i class="fa fa-gg custom"></i>
<i class="fa fa-gg-circle custom"></i>
<i class="fa fa-git custom"></i>
<i class="fa fa-git-square custom"></i>
<i class="fa fa-github custom"></i>
<i class="fa fa-github-alt custom"></i>
<i class="fa fa-github-square custom"></i>
<i class="fa fa-gratipay custom"></i>
<i class="fa fa-google custom"></i>
<i class="fa fa-google-plus custom"></i>
<i class="fa fa-google-plus-square custom"></i>
<i class="fa fa-youtube-play custom"></i>
<i class="fa fa-gratipay custom"></i>
<i class="fa fa-hacker-news custom"></i>
<i class="fa fa-houzz custom"></i>
<i class="fa fa-html5 custom"></i>
<i class="fa fa-instagram custom"></i>
<i class="fa fa-internet-explorer custom"></i>
<i class="fa fa-ioxhost custom"></i>
<i class="fa fa-joomla custom"></i>
<i class="fa fa-jsfiddle custom"></i>
<i class="fa fa-lastfm custom"></i>
<i class="fa fa-lastfm-square custom"></i>
<i class="fa fa-leanpub custom"></i>
<i class="fa fa-linkedin custom"></i>
<i class="fa fa-linkedin-square custom"></i>
<i class="fa fa-linux custom"></i>
<i class="fa fa-maxcdn custom"></i>
<i class="fa fa-meanpath custom"></i>
<i class="fa fa-medium custom"></i>
<i class="fa fa-odnoklassniki custom"></i>
<i class="fa fa-odnoklassniki-square custom"></i>
<i class="fa fa-opencart custom"></i>
<i class="fa fa-opera custom"></i>
<i class="fa fa-optin-monster custom"></i>
<i class="fa fa-openid custom"></i>
<i class="fa fa-pagelines custom"></i>
<i class="fa fa-youtube custom"></i>
<i class="fa fa-pied-piper custom"></i>
<i class="fa fa-pied-piper-alt custom"></i>
<i class="fa fa-pinterest custom"></i>
<i class="fa fa-pinterest-p custom"></i>
<i class="fa fa-pinterest-square custom"></i>
<i class="fa fa-qq custom"></i>
<i class="fa fa-ra custom"></i>
<i class="fa fa-rebel custom"></i>
<i class="fa fa-reddit custom"></i>
<i class="fa fa-renren custom"></i>
<i class="fa fa-amazon custom"></i>
<i class="fa fa-safari custom"></i>
<i class="fa fa-sellsy custom"></i>
<i class="fa fa-youtube-square custom"></i>
<i class="fa fa-share-alt custom"></i>
<i class="fa fa-share-alt-square custom"></i>
<i class="fa fa-shirtsinbulk custom"></i>
<i class="fa fa-simplybuilt custom"></i>
<i class="fa fa-skyatlas custom"></i>
<i class="fa fa-skype custom"></i>
<i class="fa fa-slack custom"></i>
<i class="fa fa-yc-square custom"></i>
<i class="fa fa-soundcloud custom"></i>
<i class="fa fa-spotify custom"></i>
<i class="fa fa-stack-exchange custom"></i>
<i class="fa fa-stack-overflow custom"></i>
<i class="fa fa-steam custom"></i>
<i class="fa fa-steam-square custom"></i>
<i class="fa fa-stumbleupon custom"></i>
<i class="fa fa-stumbleupon-circle custom"></i>
<i class="fa fa-tencent-weibo custom"></i>
<i class="fa fa-trello custom"></i>
<i class="fa fa-tripadvisor custom"></i>
<i class="fa fa-tumblr custom"></i>
<i class="fa fa-tumblr-square custom"></i>
<i class="fa fa-yahoo custom"></i>
<i class="fa fa-twitter custom"></i>
<i class="fa fa-twitter-square custom"></i>
<i class="fa fa-viacoin custom"></i>
<i class="fa fa-vimeo custom"></i>
<i class="fa fa-vimeo-square custom"></i>
<i class="fa fa-vine custom"></i>
<i class="fa fa-vk custom"></i>
<i class="fa fa-wechat custom"></i>
<i class="fa fa-weibo custom"></i>
<i class="fa fa-weixin custom"></i>
<i class="fa fa-whatsapp custom"></i>
<i class="fa fa-wikipedia-w custom"></i>
<i class="fa fa-windows custom"></i>
<i class="fa fa-wordpress custom"></i>
<i class="fa fa-xing custom"></i>
<i class="fa fa-xing-square custom"></i>
<i class="fa fa-y-combinator custom"></i>
<i class="fa fa-y-combinator-square custom"></i>
<i class="fa fa-yc custom"></i>

Font Awesome - 醫療圖示

本章解釋了 Font Awesome 醫療圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下面的示例所示。

<html>
   <head>
      <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">

      <style>
         i.custom {font-size: 2em; color: gray;}
      </style>
		
   </head>
	
   <body>
      <i class = "fa fa-adjust custom"></i>
   </body>
	
</html>

下表顯示了 Font Awesome 醫療圖示的使用方法及其結果。將上面程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	圖示
<i class="fa fa-ambulance custom"></i>
<i class="fa fa-h-square custom"></i>
<i class="fa fa-heart custom"></i>
<i class="fa fa-heart-o custom"></i>
<i class="fa fa-heartbeat custom"></i>
<i class="fa fa-hospital-o custom"></i>
<i class="fa fa-medkit custom"></i>
<i class="fa fa-plus-square custom"></i>
<i class="fa fa-stethoscope custom"></i>
<i class="fa fa-user-md custom"></i>
<i class="fa fa-wheelchair custom"></i>

Material Icons

Google 提供了一套 750 個根據“材料設計指南”設計的圖示，這些圖示被稱為 **材料設計** 圖示。這些圖示簡單易用，並且支援所有現代 Web 瀏覽器。由於這些圖示是基於向量的，因此它們也是可縮放的。要使用這些圖示，我們必須載入字型（庫）**material-icons**。

載入字型（庫）

要載入 material-icons 庫，請複製以下行並將其貼上到網頁的 <head> 部分。

<head>
   <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
</head>

使用圖示

Google 的 Material Icons 提供了很長的圖示列表。選擇其中任何一個，並將圖示類的名稱新增到 < body > 標記內的任何 HTML 元素中。在下面的示例中，我們使用了名為 **accessibility** 的圖示，它屬於操作類別。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
   </head>
	
   <body>
      <i class = "material-icons">accessibility</i>
   </body>
	
</html>

它將產生以下輸出：

定義大小

可以透過在 CSS 中定義圖示的大小並將其與類名一起使用來增加或減小圖示的大小，如下所示。在下面的示例中，我們已將大小宣告為 6em。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.mysize {font-size: 6em;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons mysize">accessibility</i>
   </body>
	
</html>

它將產生以下輸出：

定義顏色

可以使用 CSS 定義圖示的顏色。以下示例顯示瞭如何更改名為 **accessibility** 的圖示的顏色。

即時演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 6em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

它將產生以下輸出：

類別列表

Google 的 Material Icons 字型在以下類別中提供了 519 個圖示 -

操作圖示
警報圖示
音訊/影片圖示
通訊圖示
內容圖示
裝置圖示
編輯器圖示
檔案圖示
硬體圖示
影像圖示
地圖圖示
導航圖示
通知圖示
社交圖示
切換圖示

要使用任何這些圖示，必須將本章中給出的程式中的類名替換為所需圖示的類名。在本單元（材料圖示）的後續章節中，我們按類別解釋了各種材料圖示的使用方法和各自的輸出。

Material - 操作圖示

本章解釋了 Google（材料）操作圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下面的示例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google（材料）操作圖示的使用方法和結果。將上面程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="material-icons custom">3d_rotation</i>
<i class="material-icons custom">accessibility</i>
<i class="material-icons custom">account_balance</i>
<i class="material-icons custom">account_balance_wallet</i>
<i class="material-icons custom">account_box</i>
<i class="material-icons custom">account_circle</i>
<i class="material-icons custom">add_shopping_cart</i>
<i class="material-icons custom">alarm</i>
<i class="material-icons custom">alarm_add</i>
<i class="material-icons custom">alarm_off</i>
<i class="material-icons custom">alarm_on</i>
<i class="material-icons custom">android</i>
<i class="material-icons custom">announcement</i>
<i class="material-icons custom">aspect_ratio</i>
<i class="material-icons custom">assessment</i>
<i class="material-icons custom">assignment</i>
<i class="material-icons custom">assignment_ind</i>
<i class="material-icons custom">assignment_late</i>
<i class="material-icons custom">assignment_return</i>
<i class="material-icons custom">assignment_returned</i>
<i class="material-icons custom">assignment_turned_in</i>
<i class="material-icons custom">autorenew</i>
<i class="material-icons custom">backup</i>
<i class="material-icons custom">book</i>
<i class="material-icons custom">bookmark</i>
<i class="material-icons custom">bookmark_border</i>
<i class="material-icons custom">bug_report</i>
<i class="material-icons custom">build</i>
<i class="material-icons custom">cached</i>
<i class="material-icons custom">camera_enhance</i>
<i class="material-icons custom">card_giftcard</i>
<i class="material-icons custom">card_membership</i>
<i class="material-icons custom">card_travel</i>
<i class="material-icons custom">change_history</i>
<i class="material-icons custom">check_circle</i>
<i class="material-icons custom">chrome_reader_mode</i>
<i class="material-icons custom">class</i>
<i class="material-icons custom">code</i>
<i class="material-icons custom">credit_card</i>
<i class="material-icons custom">dashboard</i>
<i class="material-icons custom">delete</i>
<i class="material-icons custom">description</i>
<i class="material-icons custom">dns</i>
<i class="material-icons custom">done</i>
<i class="material-icons custom">done_all</i>
<i class="material-icons custom">eject</i>
<i class="material-icons custom">event</i>
<i class="material-icons custom">event_seat</i>
<i class="material-icons custom">exit_to_app</i>
<i class="material-icons custom">explore</i>
<i class="material-icons custom">extension</i>
<i class="material-icons custom">face</i>
<i class="material-icons custom">favorite</i>
<i class="material-icons custom">favorite_border</i>
<i class="material-icons custom">feedback</i>
<i class="material-icons custom">find_in_page</i>
<i class="material-icons custom">find_replace</i>
<i class="material-icons custom">flight_land</i>
<i class="material-icons custom">flight_takeoff</i>
<i class="material-icons custom">flip_to_back</i>
<i class="material-icons custom">flip_to_front</i>
<i class="material-icons custom">get_app</i>
<i class="material-icons custom">gif</i>
<i class="material-icons custom">grade</i>
<i class="material-icons custom">group_work</i>
<i class="material-icons custom">help</i>
<i class="material-icons custom">help_outline</i>
<i class="material-icons custom">highlight_off</i>
<i class="material-icons custom">history</i>
<i class="material-icons custom">home</i>
<i class="material-icons custom">hourglass_empty</i>
<i class="material-icons custom">hourglass_full</i>
<i class="material-icons custom">http</i>
<i class="material-icons custom">https</i>
<i class="material-icons custom">info</i>
<i class="material-icons custom">info_outline</i>
<i class="material-icons custom">input</i>
<i class="material-icons custom">invert_colors</i>
<i class="material-icons custom">label</i>
<i class="material-icons custom">label_outline</i>
<i class="material-icons custom">language</i>
<i class="material-icons custom">launch</i>
<i class="material-icons custom">list</i>
<i class="material-icons custom">lock</i>
<i class="material-icons custom">lock_open</i>
<i class="material-icons custom">lock_outline</i>
<i class="material-icons custom">loyalty</i>
<i class="material-icons custom">markunread_mailbox</i>
<i class="material-icons custom">note_add</i>
<i class="material-icons custom">offline_pin</i>
<i class="material-icons custom">open_in_browser</i>
<i class="material-icons custom">open_in_new</i>
<i class="material-icons custom">open_with</i>
<i class="material-icons custom">pageview</i>
<i class="material-icons custom">payment</i>
<i class="material-icons custom">perm_camera_mic</i>
<i class="material-icons custom">perm_contact_cale</i>
<i class="material-icons custom">perm_data_settings</i>
<i class="material-icons custom">perm_device_information</i>
<i class="material-icons custom">perm_identity</i>
<i class="material-icons custom">perm_media</i>
<i class="material-icons custom">perm_phone_msg</i>
<i class="material-icons custom">perm_scan_wifi</i>
<i class="material-icons custom">picture_in_picture</i>
<i class="material-icons custom">play_for_work</i>
<i class="material-icons custom">polymer</i>
<i class="material-icons custom">power_settings_new</i>
<i class="material-icons custom">print</i>
<i class="material-icons custom">query_builder</i>
<i class="material-icons custom">question_answer</i>
<i class="material-icons custom">receipt</i>
<i class="material-icons custom">redeem</i>
<i class="material-icons custom">reorder</i>
<i class="material-icons custom">report_problem</i>
<i class="material-icons custom">restore</i>
<i class="material-icons custom">room</i>
<i class="material-icons custom">schedule</i>
<i class="material-icons custom">search</i>
<i class="material-icons custom">settings</i>
<i class="material-icons custom">settings_applications</i>
<i class="material-icons custom">settings_bluetooth</i>
<i class="material-icons custom">settings_brightness</i>
<i class="material-icons custom">settings_cell</i>
<i class="material-icons custom">settings_ethernet</i>
<i class="material-icons custom">settings_input_antenna</i>
<i class="material-icons custom">settings_input_component</i>
<i class="material-icons custom">settings_input_hdmi</i>
<i class="material-icons custom">settings_input_svideo</i>
<i class="material-icons custom">settings_overscan</i>
<i class="material-icons custom">settings_phone</i>
<i class="material-icons custom">settings_power</i>
<i class="material-icons custom">settings_remote</i>
<i class="material-icons custom">settings_voice</i>
<i class="material-icons custom">shop</i>
<i class="material-icons custom">shop_two</i>
<i class="material-icons custom">shopping_basket</i>
<i class="material-icons custom">shopping_cart</i>
<i class="material-icons custom">speaker_notes</i>
<i class="material-icons custom">spellcheck</i>
<i class="material-icons custom">star_rate</i>
<i class="material-icons custom">stars</i>
<i class="material-icons custom">store</i>
<i class="material-icons custom">subject</i>
<i class="material-icons custom">supervisor_account</i>
<i class="material-icons custom">swap_horiz</i>
<i class="material-icons custom">swap_vert</i>
<i class="material-icons custom">swap_vertical_circle</i>
<i class="material-icons custom">system_update_alt</i>
<i class="material-icons custom">tab</i>
<i class="material-icons custom">tab_unselected</i>
<i class="material-icons custom">theaters</i>
<i class="material-icons custom">thumb_down</i>
<i class="material-icons custom">thumb_up</i>
<i class="material-icons custom">thumbs_up_down</i>
<i class="material-icons custom">toc</i>
<i class="material-icons custom">today</i>
<i class="material-icons custom">toll</i>
<i class="material-icons custom">track_changes</i>
<i class="material-icons custom">translate</i>
<i class="material-icons custom">trending_down</i>
<i class="material-icons custom">trending_flat</i>
<i class="material-icons custom">trending_up</i>
<i class="material-icons custom">turned_in</i>
<i class="material-icons custom">verified_user</i>
<i class="material-icons custom">view_agenda</i>
<i class="material-icons custom">view_array</i>
<i class="material-icons custom">view_carousel</i>
<i class="material-icons custom">view_column</i>
<i class="material-icons custom">view_day</i>
<i class="material-icons custom">view_headline</i>
<i class="material-icons custom">view_list</i>
<i class="material-icons custom">view_module</i>
<i class="material-icons custom">view_quilt</i>
<i class="material-icons custom">view_stream</i>
<i class="material-icons custom">view_week</i>
<i class="material-icons custom">visibility</i>
<i class="material-icons custom">visibility_off</i>
<i class="material-icons custom">work</i>
<i class="material-icons custom">youtube_searched_for</i>
<i class="material-icons custom">zoom_in</i>
<i class="material-icons custom">zoom_out</i>

Material - 警告圖示

本章介紹 Google (Material) 警告圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google (Material) 警告圖示的使用方法和結果。將上述程式的 <body> 標記替換為表中給出的程式碼，即可獲得相應的結果：

用法	結果
<i class="material-icons custom">add_alert</i>
<i class="material-icons custom">error</i>
<i class="material-icons custom">error_outline</i>
<i class="material-icons custom">warning</i>

Material - 音影片圖示

本章介紹 Google (Material) 音影片圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google (Material) 音影片圖示的使用方法和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的結果：

用法	結果
<i class="material-icons custom">airplay</i>
<i class="material-icons custom">album</i>
<i class="material-icons custom">av_timer</i>
<i class="material-icons custom">closed_caption</i>
<i class="material-icons custom">equalizer</i>
<i class="material-icons custom">explicit</i>
<i class="material-icons custom">fast_forward</i>
<i class="material-icons custom">fast_rewind</i>
<i class="material-icons custom">forward_10</i>
<i class="material-icons custom">forward_30</i>
<i class="material-icons custom">forward_5</i>
<i class="material-icons custom">games</i>
<i class="material-icons custom">hd</i>
<i class="material-icons custom">hearing</i>
<i class="material-icons custom">high_quality</i>
<i class="material-icons custom">library_add</i>
<i class="material-icons custom">library_books</i>
<i class="material-icons custom">library_music</i>
<i class="material-icons custom">loop</i>
<i class="material-icons custom">mic</i>
<i class="material-icons custom">mic_none</i>
<i class="material-icons custom">mic_off</i>
<i class="material-icons custom">movie</i>
<i class="material-icons custom">pause_circle_outline</i>
<i class="material-icons custom">new_releases</i>
<i class="material-icons custom">not_interested</i>
<i class="material-icons custom">pause</i>
<i class="material-icons custom">pause_circle_filled</i>
<i class="material-icons custom">play_arrow</i>
<i class="material-icons custom">play_circle_filled</i>
<i class="material-icons custom">play_circle_outline</i>
<i class="material-icons custom">playlist_add</i>
<i class="material-icons custom">queue</i>
<i class="material-icons custom">queue_music</i>
<i class="material-icons custom">radio</i>
<i class="material-icons custom">recent_actors</i>
<i class="material-icons custom">repeat</i>
<i class="material-icons custom">repeat_one</i>
<i class="material-icons custom">replay</i>
<i class="material-icons custom">airplay</i>
<i class="material-icons custom">replay_30</i>
<i class="material-icons custom">replay_5</i>
<i class="material-icons custom">shuffle</i>
<i class="material-icons custom">skip_next</i>
<i class="material-icons custom">skip_previous</i>
<i class="material-icons custom">snooze</i>
<i class="material-icons custom">sort_by_alpha</i>
<i class="material-icons custom">stop</i>
<i class="material-icons custom">subtitles</i>
<i class="material-icons custom">surround_sound</i>
<i class="material-icons custom">video_library</i>
<i class="material-icons custom">videocam</i>
<i class="material-icons custom">videocam_off</i>
<i class="material-icons custom">volume_down</i>
<i class="material-icons custom">volume_mute</i>
<i class="material-icons custom">volume_off</i>
<i class="material-icons custom">volume_up</i>
<i class="material-icons custom">web</i>

Material - 通訊圖示

本章介紹 Google (Material) 通訊圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google (Material) 通訊圖示的使用方法和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的結果：

用法	結果
<i class="material-icons custom">business</i>
<i class="material-icons custom">call</i>
<i class="material-icons custom">call_made</i>
<i class="material-icons custom">call_merge</i>
<i class="material-icons custom">call_missed</i>
<i class="material-icons custom">call_received</i>
<i class="material-icons custom">call_split</i>
<i class="material-icons custom">chat</i>
<i class="material-icons custom">chat_bubble</i>
<i class="material-icons custom">chat_bubble_outline</i>
<i class="material-icons custom">clear_all</i>
<i class="material-icons custom">comment</i>
<i class="material-icons custom">contact_phone</i>
<i class="material-icons custom">contacts</i>
<i class="material-icons custom">dialer_sip</i>
<i class="material-icons custom">dialpad</i>
<i class="material-icons custom">forum</i>
<i class="material-icons custom">import_export</i>
<i class="material-icons custom">invert_colors_off</i>
<i class="material-icons custom">live_help</i>
<i class="material-icons custom">location_off</i>
<i class="material-icons custom">location_on</i>
<i class="material-icons custom">message</i>
<i class="material-icons custom">no_sim</i>
<i class="material-icons custom">phone</i>
<i class="material-icons custom">phonelink_erase</i>
<i class="material-icons custom">phonelink_lock</i>
<i class="material-icons custom">phonelink_ring</i>
<i class="material-icons custom">phonelink_setup</i>
<i class="material-icons custom">portable_wifi_off</i>
<i class="material-icons custom">present_to_all</i>
<i class="material-icons custom">ring_volume</i>
<i class="material-icons custom">speaker_phone</i>
<i class="material-icons custom">stay_current_landscape</i>
<i class="material-icons custom">stay_current_portrait</i>
<i class="material-icons custom">stay_primary_landscape</i>
<i class="material-icons custom">stay_primary_portrait</i>
<i class="material-icons custom">swap_calls</i>
<i class="material-icons custom">textsms</i>
<i class="material-icons custom">voicemail</i>
<i class="material-icons custom">vpn_key</i>
<i class="material-icons custom">email</i>
<i class="material-icons custom">call_end</i>

Material - 內容圖示

本章介紹 Google (Material) 內容圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google (Material) 內容圖示的使用方法和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的結果：

用法	結果
<i class="material-icons custom">add</i>
<i class="material-icons custom">add_box</i>
<i class="material-icons custom">add_circle</i>
<i class="material-icons custom">add_circle_outline</i>
<i class="material-icons custom">archive</i>
<i class="material-icons custom">backspace</i>
<i class="material-icons custom">block</i>
<i class="material-icons custom">clear</i>
<i class="material-icons custom">content_copy</i>
<i class="material-icons custom">content_cut</i>
<i class="material-icons custom">content_paste</i>
<i class="material-icons custom">create</i>
<i class="material-icons custom">drafts</i>
<i class="material-icons custom">filter_list</i>
<i class="material-icons custom">flag</i>
<i class="material-icons custom">font_download</i>
<i class="material-icons custom">forward</i>
<i class="material-icons custom">gesture</i>
<i class="material-icons custom">inbox</i>
<i class="material-icons custom">link</i>
<i class="material-icons custom">mail</i>
<i class="material-icons custom">markunread</i>
<i class="material-icons custom">redo</i>
<i class="material-icons custom">remove</i>
<i class="material-icons custom">remove_circle</i>
<i class="material-icons custom">remove_circle_outline</i>
<i class="material-icons custom">reply</i>
<i class="material-icons custom">reply_all</i>
<i class="material-icons custom">report</i>
<i class="material-icons custom">save</i>
<i class="material-icons custom">select_all</i>
<i class="material-icons custom">send</i>
<i class="material-icons custom">sort</i>
<i class="material-icons custom">text_format</i>
<i class="material-icons custom">stay_current_portrait</i>
<i class="material-icons custom">undo</i>

Material - 裝置圖示

本章介紹 Google (Material) 裝置圖示的使用方法。假設 **custom** 是 CSS 類名，我們在其中定義瞭如下所示的大小和顏色。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google (Material) 裝置圖示的使用方法和結果。

用法	結果
<i class="material-icons custom">access_alarm</i>
<i class="material-icons custom">access_alarms</i>
<i class="material-icons custom">access_time</i>
<i class="material-icons custom">add_alarm</i>
<i class="material-icons custom">airplanemode_active</i>
<i class="material-icons custom">airplanemode_inactive</i>
<i class="material-icons custom">battery_alert</i>
<i class="material-icons custom">battery_charging_full</i>
<i class="material-icons custom">battery_full</i>
<i class="material-icons custom">battery_std</i>
<i class="material-icons custom">battery_unknown</i>
<i class="material-icons custom">bluetooth</i>
<i class="material-icons custom">bluetooth_connected</i>
<i class="material-icons custom">bluetooth_disabled</i>
<i class="material-icons custom">bluetooth_searching</i>
<i class="material-icons custom">brightness_auto</i>
<i class="material-icons custom">brightness_high</i>
<i class="material-icons custom">brightness_low</i>
<i class="material-icons custom">brightness_medium</i>
<i class="material-icons custom">data_usage</i>
<i class="material-icons custom">developer_mode</i>
<i class="material-icons custom">devices</i>
<i class="material-icons custom">dvr</i>
<i class="material-icons custom">gps_fixed</i>
<i class="material-icons custom">gps_not_fixed</i>
<i class="material-icons custom">gps_off</i>
<i class="material-icons custom">graphic_eq</i>
<i class="material-icons custom">location_disabled</i>
<i class="material-icons custom">location_searching</i>
<i class="material-icons custom">network_cell</i>
<i class="material-icons custom">network_wifi</i>
<i class="material-icons custom">screen_lock_landscape</i>
<i class="material-icons custom">screen_lock_portrait</i>
<i class="material-icons custom">screen_lock_rotation</i>
<i class="material-icons custom">screen_rotation</i>
<i class="material-icons custom">sd_storage</i>
<i class="material-icons custom">settings_system_daydream</i>
<i class="material-icons custom">signal_cellular_4_bar</i>
<i class="material-icons custom">wifi_tethering</i>
<i class="material-icons custom">signal_cellular_no_sim</i>
<i class="material-icons custom">signal_cellular_null</i>
<i class="material-icons custom">signal_cellular_off</i>
<i class="material-icons custom">signal_wifi_4_bar</i>
<i class="material-icons custom">signal_wifi_4_bar_lock</i>
<i class="material-icons custom">signal_wifi_off</i>
<i class="material-icons custom">storage</i>
<i class="material-icons custom">usb</i>
<i class="material-icons custom">wallpaper</i>
<i class="material-icons custom">widgets</i>
<i class="material-icons custom">wifi_lock</i>
<i class="material-icons custom">signal_cellular_connected_no_internet_4_bar</i>

Material - 編輯器圖示

本章介紹 Google (Material) 編輯器圖示的使用方法。假設 **custom** 是 CSS 類名，我們在其中定義瞭如下示例中所示的大小和顏色。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google (Material) 編輯器圖示的使用方法和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="material-icons custom">attach_file</i>
<i class="material-icons custom">attach_money</i>
<i class="material-icons custom">border_all</i>
<i class="material-icons custom">border_bottom</i>
<i class="material-icons custom">border_clear</i>
<i class="material-icons custom">border_color</i>
<i class="material-icons custom">border_horizontal</i>
<i class="material-icons custom">border_inner</i>
<i class="material-icons custom">border_left</i>
<i class="material-icons custom">border_outer</i>
<i class="material-icons custom">border_right</i>
<i class="material-icons custom">border_style</i>
<i class="material-icons custom">border_top</i>
<i class="material-icons custom">border_vertical</i>
<i class="material-icons custom">format_align_center</i>
<i class="material-icons custom">format_align_justify</i>
<i class="material-icons custom">format_align_left</i>
<i class="material-icons custom">format_align_right</i>
<i class="material-icons custom">format_bold</i>
<i class="material-icons custom">format_clear</i>
<i class="material-icons custom">format_color_fill</i>
<i class="material-icons custom">format_color_reset</i>
<i class="material-icons custom">format_color_text</i>
<i class="material-icons custom">format_indent_decrease</i>
<i class="material-icons custom">format_indent_increase</i>
<i class="material-icons custom">format_italic</i>
<i class="material-icons custom">format_line_spacing</i>
<i class="material-icons custom">format_list_bulleted</i>
<i class="material-icons custom">format_list_numbered</i>
<i class="material-icons custom">format_paint</i>
<i class="material-icons custom">format_quote</i>
<i class="material-icons custom">format_size</i>
<i class="material-icons custom">format_strikethrough</i>
<i class="material-icons custom">format_textdirection_l_to_r</i>
<i class="material-icons custom">format_textdirection_r_to_l</i>
<i class="material-icons custom">format_underline</i>
<i class="material-icons custom">functions</i>
<i class="material-icons custom">insert_chart</i>
<i class="material-icons custom">insert_comment</i>
<i class="material-icons custom">insert_drive_file</i>
<i class="material-icons custom">insert_emoticon</i>
<i class="material-icons custom">insert_invitation</i>
<i class="material-icons custom">insert_link</i>
<i class="material-icons custom">insert_photo</i>
<i class="material-icons custom">merge_type</i>
<i class="material-icons custom">mode_comment</i>
<i class="material-icons custom">mode_edit</i>
<i class="material-icons custom">money_off</i>
<i class="material-icons custom">publish</i>
<i class="material-icons custom">space_bar</i>
<i class="material-icons custom">strikethrough_s</i>
<i class="material-icons custom">vertical_align_bottom</i>
<i class="material-icons custom">vertical_align_center</i>
<i class="material-icons custom">vertical_align_top</i>
<i class="material-icons custom">wrap_text</i>

Material - 檔案圖示

本章介紹 Google (Material) 檔案圖示的使用方法。假設 **custom** 是 CSS 類名，我們在其中定義瞭如下示例中所示的大小和顏色。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google (Material) 檔案圖示的使用方法和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="material-icons custom">attachment</i>
<i class="material-icons custom">cloud</i>
<i class="material-icons custom">cloud_circle</i>
<i class="material-icons custom">cloud_done</i>
<i class="material-icons custom">cloud_download</i>
<i class="material-icons custom">cloud_off</i>
<i class="material-icons custom">cloud_queue</i>
<i class="material-icons custom">cloud_upload</i>
<i class="material-icons custom">file_download</i>
<i class="material-icons custom">file_upload</i>
<i class="material-icons custom">folder</i>
<i class="material-icons custom">folder_open</i>
<i class="material-icons custom">folder_shared</i>

Material - 硬體圖示

本章介紹 Google (Material) 硬體圖示的使用方法。假設 **custom** 是 CSS 類名，我們在其中定義瞭如下示例中所示的大小和顏色。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google (Material) 硬體圖示的使用方法和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="material-icons custom">cast</i>
<i class="material-icons custom">cast_connected</i>
<i class="material-icons custom">computer</i>
<i class="material-icons custom">desktop_mac</i>
<i class="material-icons custom">desktop_windows</i>
<i class="material-icons custom">developer_board</i>
<i class="material-icons custom">device_hub</i>
<i class="material-icons custom">dock</i>
<i class="material-icons custom">gamepad</i>
<i class="material-icons custom">headset</i>
<i class="material-icons custom">headset_mic</i>
<i class="material-icons custom">keyboard</i>
<i class="material-icons custom">keyboard_arrow_down</i>
<i class="material-icons custom">keyboard_arrow_left</i>
<i class="material-icons custom">keyboard_arrow_right</i>
<i class="material-icons custom">keyboard_arrow_up</i>
<i class="material-icons custom">keyboard_backspace</i>
<i class="material-icons custom">keyboard_capslock</i>
<i class="material-icons custom">keyboard_hide</i>
<i class="material-icons custom">keyboard_return</i>
<i class="material-icons custom">keyboard_tab</i>
<i class="material-icons custom">keyboard_voice</i>
<i class="material-icons custom">laptop</i>
<i class="material-icons custom">laptop_chromebook</i>
<i class="material-icons custom">laptop_mac</i>
<i class="material-icons custom">laptop_windows</i>
<i class="material-icons custom">memory</i>
<i class="material-icons custom">mouse</i>
<i class="material-icons custom">phone_android</i>
<i class="material-icons custom">phone_iphone</i>
<i class="material-icons custom">phonelink</i>
<i class="material-icons custom">phonelink_off</i>
<i class="material-icons custom">power_input</i>
<i class="material-icons custom">router</i>
<i class="material-icons custom">scanner</i>
<i class="material-icons custom">security</i>
<i class="material-icons custom">sim_card</i>
<i class="material-icons custom">smartphone</i>
<i class="material-icons custom">speaker</i>
<i class="material-icons custom">speaker_group</i>
<i class="material-icons custom">tablet</i>
<i class="material-icons custom">tablet_android</i>
<i class="material-icons custom">tablet_mac</i>
<i class="material-icons custom">toys</i>
<i class="material-icons custom">tv</i>
<i class="material-icons custom">watch</i>

Material - 圖片圖示

本章介紹 Google 的（Material）影像圖示的使用方法。假設**custom** 是我們定義大小和顏色的 CSS 類名，如下面的示例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google 的（Material）影像圖示的使用方法和結果。將上述程式的< body >標籤替換為表中給出的程式碼，即可獲得相應的輸出 -

用法	結果
<i class="material-icons custom">add_to_photos</i>
<i class="material-icons custom">adjust</i>
<i class="material-icons custom">assistant</i>
<i class="material-icons custom">assistant</i>
<i class="material-icons custom">audiotrack</i>
<i class="material-icons custom">blur_circular</i>
<i class="material-icons custom">blur_linear</i>
<i class="material-icons custom">blur_off</i>
<i class="material-icons custom">blur_on</i>
<i class="material-icons custom">brightness_1</i>
<i class="material-icons custom">brightness_2</i>
<i class="material-icons custom">brightness_3</i>
<i class="material-icons custom">brightness_4</i>
<i class="material-icons custom">brightness_5</i>
<i class="material-icons custom">brightness_6</i>
<i class="material-icons custom">brightness_7</i>
<i class="material-icons custom">broken_image</i>
<i class="material-icons custom">brush</i>
<i class="material-icons custom">camera</i>
<i class="material-icons custom">camera_alt</i>
<i class="material-icons custom">camera_front</i>
<i class="material-icons custom">camera_rear</i>
<i class="material-icons custom">camera_roll</i>
<i class="material-icons custom">center_focus_strong</i>
<i class="material-icons custom">center_focus_weak</i>
<i class="material-icons custom">collections</i>
<i class="material-icons custom">collections_bookmark</i>
<i class="material-icons custom">color_lens</i>
<i class="material-icons custom">colorize</i>
<i class="material-icons custom">compare</i>
<i class="material-icons custom">control_point</i>
<i class="material-icons custom">control_point_duplicate</i>
<i class="material-icons custom">crop</i>
<i class="material-icons custom">crop_16_9</i>
<i class="material-icons custom">crop_3_2</i>
<i class="material-icons custom">crop_5_4</i>
<i class="material-icons custom">crop_7_5</i>
<i class="material-icons custom">crop_din</i>
<i class="material-icons custom">crop_free</i>
<i class="material-icons custom">crop_landscape</i>
<i class="material-icons custom">crop_original</i>
<i class="material-icons custom">crop_portrait</i>
<i class="material-icons custom">crop_square</i>
<i class="material-icons custom">dehaze</i>
<i class="material-icons custom">details</i>
<i class="material-icons custom">edit</i>
<i class="material-icons custom">exposure</i>
<i class="material-icons custom">exposure_neg_1</i>
<i class="material-icons custom">exposure_plus_1</i>
<i class="material-icons custom">exposure_plus_2</i>
<i class="material-icons custom">exposure_zero</i>
<i class="material-icons custom">filter</i>
<i class="material-icons custom">filter_1</i>
<i class="material-icons custom">filter_2</i>
<i class="material-icons custom">filter_3</i>
<i class="material-icons custom">filter_4</i>
<i class="material-icons custom">filter_5</i>
<i class="material-icons custom">filter_6</i>
<i class="material-icons custom">filter_7</i>
<i class="material-icons custom">filter_8</i>
<i class="material-icons custom">filter_9</i>
<i class="material-icons custom">filter_9_plus</i>
<i class="material-icons custom">filter_b_and_w</i>
<i class="material-icons custom">filter_center_focus</i>
<i class="material-icons custom">filter_drama</i>
<i class="material-icons custom">filter_frames</i>
<i class="material-icons custom">filter_hdr</i>
<i class="material-icons custom">filter_none</i>
<i class="material-icons custom">filter_tilt_shift</i>
<i class="material-icons custom">filter_vintage</i>
<i class="material-icons custom">flare</i>
<i class="material-icons custom">flash_auto</i>
<i class="material-icons custom">flash_off</i>
<i class="material-icons custom">flash_on</i>
<i class="material-icons custom">flip</i>
<i class="material-icons custom">gradient</i>
<i class="material-icons custom">grain</i>
<i class="material-icons custom">grid_off</i>
<i class="material-icons custom">grid_on</i>
<i class="material-icons custom">hdr_off</i>
<i class="material-icons custom">hdr_on</i>
<i class="material-icons custom">hdr_strong</i>
<i class="material-icons custom">hdr_weak</i>
<i class="material-icons custom">healing</i>
<i class="material-icons custom">image</i>
<i class="material-icons custom">image_aspect_ratio</i>
<i class="material-icons custom">iso</i>
<i class="material-icons custom">landscape</i>
<i class="material-icons custom">leak_add</i>
<i class="material-icons custom">leak_remove</i>
<i class="material-icons custom">lens</i>
<i class="material-icons custom">looks</i>
<i class="material-icons custom">looks_3</i>
<i class="material-icons custom">looks_4</i>
<i class="material-icons custom">looks_5</i>
<i class="material-icons custom">looks_6</i>
<i class="material-icons custom">looks_one</i>
<i class="material-icons custom">looks_two</i>
<i class="material-icons custom">loupe</i>
<i class="material-icons custom">monochrome_photos</i>
<i class="material-icons custom">movie_creation</i>
<i class="material-icons custom">music_note</i>
<i class="material-icons custom">nature</i>
<i class="material-icons custom">nature_people</i>
<i class="material-icons custom">wb_sunny</i>
<i class="material-icons custom">navigate_next</i>
<i class="material-icons custom">navigate_before</i>
<i class="material-icons custom">palette</i>
<i class="material-icons custom">panorama</i>
<i class="material-icons custom">panorama_fish_eye</i>
<i class="material-icons custom">panorama_horizontal</i>
<i class="material-icons custom">panorama_vertical</i>
<i class="material-icons custom">panorama_wide_angle</i>
<i class="material-icons custom">photo</i>
<i class="material-icons custom">photo_album</i>
<i class="material-icons custom">photo_camera</i>
<i class="material-icons custom">photo_library</i>
<i class="material-icons custom">photo_size_select_actual</i>
<i class="material-icons custom">photo_size_select_large</i>
<i class="material-icons custom">photo_size_select_small</i>
<i class="material-icons custom">picture_as_pdf</i>
<i class="material-icons custom">portrait</i>
<i class="material-icons custom">remove_red_eye</i>
<i class="material-icons custom">rotate_90_degrees_ccw</i>
<i class="material-icons custom">rotate_left</i>
<i class="material-icons custom">rotate_right</i>
<i class="material-icons custom">slideshow</i>
<i class="material-icons custom">straighten</i>
<i class="material-icons custom">style</i>
<i class="material-icons custom">switch_camera</i>
<i class="material-icons custom">switch_video</i>
<i class="material-icons custom">tag_faces</i>
<i class="material-icons custom">texture</i>
<i class="material-icons custom">timelapse</i>
<i class="material-icons custom">timer</i>
<i class="material-icons custom">timer_10</i>
<i class="material-icons custom">timer_3</i>
<i class="material-icons custom">timer_off</i>
<i class="material-icons custom">tonality</i>
<i class="material-icons custom">transform</i>
<i class="material-icons custom">tune</i>
<i class="material-icons custom">view_comfy</i>
<i class="material-icons custom">view_compact</i>
<i class="material-icons custom">vignette</i>
<i class="material-icons custom">wb_auto</i>
<i class="material-icons custom">wb_cloudy</i>
<i class="material-icons custom">wb_incandescent</i>
<i class="material-icons custom">wb_iridescent</i>

Material - 地圖圖示

本章解釋了 Google（Material）地圖圖示的使用方法。假設custom是 CSS 類名，我們在其中定義了大小和顏色，如下面的示例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google（Material）地圖圖示的使用方法和結果。將上述程式的< body >標籤替換為表中給出的程式碼，即可獲得相應的輸出結果 -

用法	結果
<i class="material-icons custom">beenhere</i>
<i class="material-icons custom">directions</i>
<i class="material-icons custom">directions_bike</i>
<i class="material-icons custom">directions_boat</i>
<i class="material-icons custom">directions_bus</i>
<i class="material-icons custom">directions_car</i>
<i class="material-icons custom">directions_railway</i>
<i class="material-icons custom">directions_run</i>
<i class="material-icons custom">directions_subway</i>
<i class="material-icons custom">directions_transit</i>
<i class="material-icons custom">directions_walk</i>
<i class="material-icons custom">flight</i>
<i class="material-icons custom">hotel</i>
<i class="material-icons custom">layers</i>
<i class="material-icons custom">layers_clear</i>
<i class="material-icons custom">local_activity</i>
<i class="material-icons custom">local_airport</i>
<i class="material-icons custom">local_atm</i>
<i class="material-icons custom">local_bar</i>
<i class="material-icons custom">local_cafe</i>
<i class="material-icons custom">local_car_wash</i>
<i class="material-icons custom">local_convenience_store</i>
<i class="material-icons custom">local_dining</i>
<i class="material-icons custom">local_drink</i>
<i class="material-icons custom">local_florist</i>
<i class="material-icons custom">local_gas_station</i>
<i class="material-icons custom">local_grocery_store</i>
<i class="material-icons custom">local_hospital</i>
<i class="material-icons custom">local_hotel</i>
<i class="material-icons custom">local_laundry_service</i>
<i class="material-icons custom">local_library</i>
<i class="material-icons custom">local_mall</i>
<i class="material-icons custom">local_movies</i>
<i class="material-icons custom">local_offer</i>
<i class="material-icons custom">local_parking</i>
<i class="material-icons custom">local_pharmacy</i>
<i class="material-icons custom">local_phone</i>
<i class="material-icons custom">local_pizza</i>
<i class="material-icons custom">local_play</i>
<i class="material-icons custom">local_post_office</i>
<i class="material-icons custom">local_printshop</i>
<i class="material-icons custom">local_see</i>
<i class="material-icons custom">local_shipping</i>
<i class="material-icons custom">local_taxi</i>
<i class="material-icons custom">map</i>
<i class="material-icons custom">my_location</i>
<i class="material-icons custom">navigation</i>
<i class="material-icons custom">person_pin</i>
<i class="material-icons custom">pin_drop</i>
<i class="material-icons custom">place</i>
<i class="material-icons custom">rate_review</i>
<i class="material-icons custom">restaurant_menu</i>
<i class="material-icons custom">satellite</i>
<i class="material-icons custom">store_mall_directory</i>
<i class="material-icons custom">traffic</i>
<i class="material-icons custom">terrain</i>

Material - 導航圖示

本章解釋了 Google（Material）導航圖示的使用方法。假設custom是 CSS 類名，我們在其中定義了大小和顏色，如下面的示例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google（Material）導航圖示的使用方法和結果。將上述程式的< body >標籤替換為表中給出的程式碼，即可獲得相應的輸出結果 -

用法	結果
<i class="material-icons custom">apps</i>
<i class="material-icons custom">arrow_back</i>
<i class="material-icons custom">arrow_drop_down</i>
<i class="material-icons custom">arrow_drop_down_circle</i>
<i class="material-icons custom">arrow_drop_up</i>
<i class="material-icons custom">arrow_forward</i>
<i class="material-icons custom">cancel</i>
<i class="material-icons custom">check</i>
<i class="material-icons custom">chevron_left</i>
<i class="material-icons custom">chevron_right</i>
<i class="material-icons custom">close</i>
<i class="material-icons custom">expand_less</i>
<i class="material-icons custom">expand_more</i>
<i class="material-icons custom">fullscreen</i>
<i class="material-icons custom">fullscreen_exit</i>
<i class="material-icons custom">menu</i>
<i class="material-icons custom">more_horiz</i>
<i class="material-icons custom">more_vert</i>
<i class="material-icons custom">refresh</i>

Material - 通知圖示

本章解釋了 Google（Material）通知圖示的使用方法。假設custom是 CSS 類名，我們在其中定義了大小和顏色，如下面的示例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google（Material）通知圖示的使用方法和結果。將上述程式的< body >標籤替換為表中給出的程式碼，即可獲得相應的輸出結果 -

用法	結果
<i class="material-icons custom">adb</i>
<i class="material-icons custom">airline_seat_flat</i>
<i class="material-icons custom">airline_seat_flat_angled</i>
<i class="material-icons custom">airline_seat_individual_suite</i>
<i class="material-icons custom">airline_seat_legroom_reduced</i>
<i class="material-icons custom">airline_seat_recline_extra</i>
<i class="material-icons custom">airline_seat_recline_normal</i>
<i class="material-icons custom">bluetooth_audio</i>
<i class="material-icons custom">confirmation_number</i>
<i class="material-icons custom">disc_full</i>
<i class="material-icons custom">do_not_disturb</i>
<i class="material-icons custom">do_not_disturb_alt</i>
<i class="material-icons custom">drive_eta</i>
<i class="material-icons custom">event_available</i>
<i class="material-icons custom">event_busy</i>
<i class="material-icons custom">event_note</i>
<i class="material-icons custom">folder_special</i>
<i class="material-icons custom">live_tv</i>
<i class="material-icons custom">mms</i>
<i class="material-icons custom">more</i>
<i class="material-icons custom">network_locked</i>
<i class="material-icons custom">ondemand_video</i>
<i class="material-icons custom">personal_video</i>
<i class="material-icons custom">phone_bluetooth_speaker</i>
<i class="material-icons custom">phone_forwarded</i>
<i class="material-icons custom">phone_in_talk</i>
<i class="material-icons custom">phone_locked</i>
<i class="material-icons custom">phone_missed</i>
<i class="material-icons custom">phone_paused</i>
<i class="material-icons custom">power</i>
<i class="material-icons custom">sd_card</i>
<i class="material-icons custom">sim_card_alert</i>
<i class="material-icons custom">sms</i>
<i class="material-icons custom">sms_failed</i>
<i class="material-icons custom">sync</i>
<i class="material-icons custom">sync_disabled</i>
<i class="material-icons custom">sync_problem</i>
<i class="material-icons custom">system_update</i>
<i class="material-icons custom">tap_and_play</i>
<i class="material-icons custom">time_to_leave</i>
<i class="material-icons custom">vibration</i>
<i class="material-icons custom">voice_chat</i>
<i class="material-icons custom">vpn_lock</i>
<i class="material-icons custom">wc</i>
<i class="material-icons custom">wifi</i>

Material - 社交圖示

本章解釋了 Google（Material）社交圖示的使用方法。假設custom是 CSS 類名，我們在其中定義了大小和顏色，如下面的示例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google（Material）社交圖示的使用方法和結果。將上述程式的< body >標籤替換為表中給出的程式碼，即可獲得相應的輸出結果 -

用法	結果
<i class="material-icons custom">cake</i>
<i class="material-icons custom">domain</i>
<i class="material-icons custom">group</i>
<i class="material-icons custom">group_add</i>
<i class="material-icons custom">location_city</i>
<i class="material-icons custom">mood</i>
<i class="material-icons custom">mood_bad</i>
<i class="material-icons custom">notifications</i>
<i class="material-icons custom">notifications_active</i>
<i class="material-icons custom">notifications_none</i>
<i class="material-icons custom">notifications_off</i>
<i class="material-icons custom">notifications_paused</i>
<i class="material-icons custom">pages</i>
<i class="material-icons custom">party_mode</i>
<i class="material-icons custom">people</i>
<i class="material-icons custom">people_outline</i>
<i class="material-icons custom">person</i>
<i class="material-icons custom">person_add</i>
<i class="material-icons custom">person_outline</i>
<i class="material-icons custom">plus_one</i>
<i class="material-icons custom">poll</i>
<i class="material-icons custom">public</i>
<i class="material-icons custom">school</i>
<i class="material-icons custom">share</i>
<i class="material-icons custom">whatshot</i>

Material - 切換圖示

本章介紹 Google（Material）切換圖示的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下面的示例所示。

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel =  "stylesheet">
		
      <style>
         i.custom {font-size: 2em; color: green;}
      </style>
		
   </head>
	
   <body>
      <i class = "material-icons custom">accessibility</i>
   </body>
	
</html>

下表包含 Google（Material）切換圖示的使用方法和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出。

用法	結果
<i class="material-icons custom">check_box</i>
<i class="material-icons custom">check_box_outline_blank</i>
<i class="material-icons custom">indeterminate_check_box</i>
<i class="material-icons custom">radio_button_checked</i>
<i class="material-icons custom">radio_button_unchecked</i>
<i class="material-icons custom">star</i>
<i class="material-icons custom">star_border</i>
<i class="material-icons custom">star_half</i>

Bootstrap Glyphicons

這是一個以光柵影像格式、向量影像格式和字型格式提供的單色圖示庫。它以字型格式提供了 250 多個字形。您可以在您的 Web 專案中使用這些字型。但是這些字形不是免費的，如果您在基於 Bootstrap 的專案中使用它們，則無需支付任何費用。

載入字型（庫）

要載入 Bootstrap Glyphicons 庫，請複製並貼上以下行到網頁的 <head> 部分。

<head>
   <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>

使用圖示

Bootstrap Glyphicons 提供了許多圖示。選擇其中一個，並將圖示類名新增到 < body > 標記內的任何 HTML 元素中。在下面的示例中，我們使用了樹的圖示，其類名為 **tree-deciduous**。

即時演示

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous">  </i>
   </body>
</html>

它將產生以下輸出：

定義大小

您可以透過在 CSS 中定義其大小並在類名中使用它來增加或減小圖示的大小，如下所示。在下面的示例中，我們已將大小定義為 6em。

即時演示

<html>
   <head>
      <link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

它將產生以下輸出

定義顏色

您可以使用 CSS 定義圖示的顏色。以下示例顯示瞭如何更改樹形圖示的顏色。

即時演示

<html>
   <head>
      <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
      i.mysize {font-size: 6em; color: blue;}
      </style>
   </head>
 
   <body>
      <i class="glyphicon glyphicon-tree-deciduous mysize"></i>
   </body>
</html>

它將產生以下輸出：

Bootstrap 元件

本章介紹 Bootstrap Glyphicons（元件）的使用方法。假設 **custom** 是我們定義大小和顏色的 CSS 類名，如下面的示例所示。

即時演示

<html>
   <head>
      <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      
      <i.custom {font-size: 2em; color: blue;}>
   </head>
	
   <body>
      <i class = "glyphicon glyphicon-tree-deciduous custom"></i>
   </body>
	
</html>

下表包含 Bootstrap Glyphicons（元件）的使用方法和結果。將上述程式的 < body > 標記替換為表中給出的程式碼，即可獲得相應的輸出。

用法	結果
<i class="glyphicon glyphicon-asterisk custom"></i>
<i class="glyphicon glyphicon-plus custom"></i>
<i class="glyphicon glyphicon-euro custom"></i>
<i class="glyphicon glyphicon-minus custom"></i>
<i class="glyphicon glyphicon-cloud custom"></i>
<i class="glyphicon glyphicon-envelope custom"></i>
<i class="glyphicon glyphicon-pencil custom"></i>
<i class="glyphicon glyphicon-glass custom"></i>
<i class="glyphicon glyphicon-music custom"></i>
<i class="glyphicon glyphicon-search custom"></i>
<i class="glyphicon glyphicon-heart custom"></i>
<i class="glyphicon glyphicon-star custom"></i>
<i class="glyphicon glyphicon-star-empty custom"></i>
<i class="glyphicon glyphicon-user custom"></i>
<i class="glyphicon glyphicon-film custom"></i>
<i class="glyphicon glyphicon-th-large custom"></i>
<i class="glyphicon glyphicon-th custom"></i>
<i class="glyphicon glyphicon-th-list custom"></i>
<i class="glyphicon glyphicon-ok custom"></i>
<i class="glyphicon glyphicon-remove custom"></i>
<i class="glyphicon glyphicon-zoom-in custom"></i>
<i class="glyphicon glyphicon-zoom-out custom"></i>
<i class="glyphicon glyphicon-off custom"></i>
<i class="glyphicon glyphicon-signal custom"></i>
<i class="glyphicon glyphicon-cog custom"></i>
<i class="glyphicon glyphicon-trash custom"></i>
<i class="glyphicon glyphicon-home custom"></i>
<i class="glyphicon glyphicon-file custom"></i>
<i class="glyphicon glyphicon-time custom"></i>
<i class="glyphicon glyphicon-road custom"></i>
<i class="glyphicon glyphicon-download-alt custom"></i>
<i class="glyphicon glyphicon-download custom"></i>
<i class="glyphicon glyphicon-upload custom"></i>
<i class="glyphicon glyphicon-inbox custom"></i>
<i class="glyphicon glyphicon-play-circle custom"></i>
<i class="glyphicon glyphicon-repeat custom"></i>
<i class="glyphicon glyphicon-refresh custom"></i>
<i class="glyphicon glyphicon-list-alt custom"></i>
<i class="glyphicon glyphicon-lock custom"></i>
<i class="glyphicon glyphicon-flag custom"></i>
<i class="glyphicon glyphicon-headphones custom"></i>
<i class="glyphicon glyphicon-volume-off custom"></i>
<i class="glyphicon glyphicon-volume-down custom"></i>
<i class="glyphicon glyphicon-volume-up custom"></i>
<i class="glyphicon glyphicon-qrcode custom"></i>
<i class="glyphicon glyphicon-barcode custom"></i>
<i class="glyphicon glyphicon-tag custom"></i>
<i class="glyphicon glyphicon-tags custom"></i>
<i class="glyphicon glyphicon-book custom"></i>
<i class="glyphicon glyphicon-bookmark custom"></i>
<i class="glyphicon glyphicon-print custom"></i>
<i class="glyphicon glyphicon-camera custom"></i>
<i class="glyphicon glyphicon-font custom"></i>
<i class="glyphicon glyphicon-bold custom"></i>
<i class="glyphicon glyphicon-italic custom"></i>
<i class="glyphicon glyphicon-text-height custom"></i>
<i class="glyphicon glyphicon-text-width custom"></i>
<i class="glyphicon glyphicon-align-left custom"></i>
<i class="glyphicon glyphicon-align-center custom"></i>
<i class="glyphicon glyphicon-align-right custom"></i>
<i class="glyphicon glyphicon-align-justify custom"></i>
<i class="glyphicon glyphicon-list custom"></i>
<i class="glyphicon glyphicon-indent-left custom"></i>
<i class="glyphicon glyphicon-indent-right custom"></i>
<i class="glyphicon glyphicon-facetime-video custom"></i>
<i class="glyphicon glyphicon-picture custom"></i>
<i class="glyphicon glyphicon-map-marker custom"></i>
<i class="glyphicon glyphicon-adjust custom"></i>
<i class="glyphicon glyphicon-tint custom"></i>
<i class="glyphicon glyphicon-edit custom"></i>
<i class="glyphicon glyphicon-share custom"></i>
<i class="glyphicon glyphicon-check custom"></i>
<i class="glyphicon glyphicon-move custom"></i>
<i class="glyphicon glyphicon-step-backward custom"></i>
<i class="glyphicon glyphicon-fast-backward custom"></i>
<i class="glyphicon glyphicon-backward custom"></i>
<i class="glyphicon glyphicon-play custom"></i>
<i class="glyphicon glyphicon-pause custom"></i>
<i class="glyphicon glyphicon-stop custom"></i>
<i class="glyphicon glyphicon-forward custom"></i>
<i class="glyphicon glyphicon-fast-forward custom"></i>
<i class="glyphicon glyphicon-step-forward custom"></i>
<i class="glyphicon glyphicon-eject custom"></i>
<i class="glyphicon glyphicon-chevron-left custom"></i>
<i class="glyphicon glyphicon-chevron-right custom"></i>
<i class="glyphicon glyphicon-plus-sign custom"></i>
<i class="glyphicon glyphicon-minus-sign custom"></i>
<i class="glyphicon glyphicon-remove-sign custom"></i>
<i class="glyphicon glyphicon-ok-sign custom"></i>
<i class="glyphicon glyphicon-question-sign custom"></i>
<i class="glyphicon glyphicon-info-sign custom"></i>
<i class="glyphicon glyphicon-screenshot custom"></i>
<i class="glyphicon glyphicon-remove-circle custom"></i>
<i class="glyphicon glyphicon-ok-circle custom"></i>
<i class="glyphicon glyphicon-ban-circle custom"></i>
<i class="glyphicon glyphicon-arrow-left custom"></i>
<i class="glyphicon glyphicon-arrow-right custom"></i>
<i class="glyphicon glyphicon-arrow-up custom"></i>
<i class="glyphicon glyphicon-arrow-down custom"></i>
<i class="glyphicon glyphicon-share-alt custom"></i>
<i class="glyphicon glyphicon-resize-full custom"></i>
<i class="glyphicon glyphicon-resize-small custom"></i>
<i class="glyphicon glyphicon-exclamation-sign custom"></i>
<i class="glyphicon glyphicon-gift custom"></i>
<i class="glyphicon glyphicon-leaf custom"></i>
<i class="glyphicon glyphicon-fire custom"></i>
<i class="glyphicon glyphicon-eye-open custom"></i>
<i class="glyphicon glyphicon-eye-close custom"></i>
<i class="glyphicon glyphicon-warning-sign custom"></i>
<i class="glyphicon glyphicon-plane custom"></i>
<i class="glyphicon glyphicon-calendar custom"></i>
<i class="glyphicon glyphicon-random custom"></i>
<i class="glyphicon glyphicon-comment custom"></i>
<i class="glyphicon glyphicon-magnet custom"></i>
<i class="glyphicon glyphicon-chevron-up custom"></i>
<i class="glyphicon glyphicon-chevron-down custom"></i>
<i class="glyphicon glyphicon-retweet custom"></i>
<i class="glyphicon glyphicon-shopping-cart custom"></i>
<i class="glyphicon glyphicon-folder-close custom"></i>
<i class="glyphicon glyphicon-folder-open custom"></i>
<i class="glyphicon glyphicon-resize-vertical custom"></i>
<i class="glyphicon glyphicon-resize-horizontal custom"></i>
<i class="glyphicon glyphicon-hdd custom"></i>
<i class="glyphicon glyphicon-bullhorn custom"></i>
<i class="glyphicon glyphicon-bell custom"></i>
<i class="glyphicon glyphicon-certificate custom"></i>
<i class="glyphicon glyphicon-thumbs-up custom"></i>
<i class="glyphicon glyphicon-thumbs-down custom"></i>
<i class="glyphicon glyphicon-hand-right custom"></i>
<i class="glyphicon glyphicon-hand-left custom"></i>
<i class="glyphicon glyphicon-hand-up custom"></i>
<i class="glyphicon glyphicon-hand-down custom"></i>
<i class="glyphicon glyphicon-circle-arrow-right custom"></i>
<i class="glyphicon glyphicon-circle-arrow-left custom"></i>
<i class="glyphicon glyphicon-circle-arrow-up custom"></i>
<i class="glyphicon glyphicon-circle-arrow-down custom"></i>
<i class="glyphicon glyphicon-globe custom"></i>
<i class="glyphicon glyphicon-wrench custom"></i>
<i class="glyphicon glyphicon-tasks custom"></i>
<i class="glyphicon glyphicon-filter custom"></i>
<i class="glyphicon glyphicon-briefcase custom"></i>
<i class="glyphicon glyphicon-fullscreen custom"></i>
<i class="glyphicon glyphicon-dashboard custom"></i>
<i class="glyphicon glyphicon-paperclip custom"></i>
<i class="glyphicon glyphicon-heart-empty custom"></i>
<i class="glyphicon glyphicon-link custom"></i>
<i class="glyphicon glyphicon-phone custom"></i>
<i class="glyphicon glyphicon-pushpin custom"></i>
<i class="glyphicon glyphicon-usd custom"></i>
<i class="glyphicon glyphicon-gbp custom"></i>
<i class="glyphicon glyphicon-sort custom"></i>
<i class="glyphicon glyphicon-sort-by-alphabet custom"></i>
<i class="glyphicon glyphicon-sort-by-alphabet-alt custom"></i>
<i class="glyphicon glyphicon-sort-by-order custom"></i>
<i class="glyphicon glyphicon-sort-by-order-alt custom"></i>
<i class="glyphicon glyphicon-sort-by-attributes custom"></i>
<i class="glyphicon glyphicon-sort-by-attributes-alt custom"></i>
<i class="glyphicon glyphicon-unchecked custom"></i>
<i class="glyphicon glyphicon-expand custom"></i>
<i class="glyphicon glyphicon-collapse-down custom"></i>
<i class="glyphicon glyphicon-collapse-up custom"></i>
<i class="glyphicon glyphicon-log-in custom"></i>
<i class="glyphicon glyphicon-flash custom"></i>
<i class="glyphicon glyphicon-log-out custom"></i>
<i class="glyphicon glyphicon-new-window custom"></i>
<i class="glyphicon glyphicon-record custom"></i>
<i class="glyphicon glyphicon-save custom"></i>
<i class="glyphicon glyphicon-open custom"></i>
<i class="glyphicon glyphicon-saved custom"></i>
<i class="glyphicon glyphicon-import custom"></i>
<i class="glyphicon glyphicon-export custom"></i>
<i class="glyphicon glyphicon-send custom"></i>
<i class="glyphicon glyphicon-floppy-disk custom"></i>
<i class="glyphicon glyphicon-floppy-saved custom"></i>
<i class="glyphicon glyphicon-floppy-remove custom"></i>
<i class="glyphicon glyphicon-floppy-save custom"></i>
<i class="glyphicon glyphicon-floppy-open custom"></i>
<i class="glyphicon glyphicon-credit-card custom"></i>
<i class="glyphicon glyphicon-transfer custom"></i>
<i class="glyphicon glyphicon-cutlery custom"></i>
<i class="glyphicon glyphicon-header custom"></i>
<i class="glyphicon glyphicon-compressed custom"></i>
<i class="glyphicon glyphicon-earphone custom"></i>
<i class="glyphicon glyphicon-phone custom"></i>
<i class="glyphicon glyphicon-tower custom"></i>
<i class="glyphicon glyphicon-stats custom"></i>
<i class="glyphicon glyphicon-sd-video custom"></i>
<i class="glyphicon glyphicon-hd-video custom"></i>
<i class="glyphicon glyphicon-subtitles custom"></i>
<i class="glyphicon glyphicon-sound-stereo custom"></i>
<i class="glyphicon glyphicon-sound-dolby custom"></i>
<i class="glyphicon glyphicon-sound-5-1 custom"></i>
<i class="glyphicon glyphicon-sound-6-1 custom"></i>
<i class="glyphicon glyphicon-sound-7-1 custom"></i>
<i class="glyphicon glyphicon-copyright-mark custom"></i>
<i class="glyphicon glyphicon-registration-mark custom"></i>
<i class="glyphicon glyphicon-cloud-download custom"></i>
<i class="glyphicon glyphicon-cloud-upload custom"></i>
<i class="glyphicon glyphicon-tree-conifer custom"></i>
<i class="glyphicon glyphicon-tree-deciduous custom"></i>

列印頁面