Material 圖示

Google 提供了一套 750 個根據“Material Design 指南”設計的圖示，這些圖示被稱為Material Design 圖示。這些圖示簡潔易用，並且支援所有現代網頁瀏覽器。由於這些圖示是基於向量的，因此它們也是可縮放的。要使用這些圖示，我們必須載入字型（庫）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 中定義圖示的大小並將其與類名一起使用來增加或減小圖示的大小，如下所示。在以下示例中，我們已將大小宣告為 6 em。

線上演示

<!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 Icons）的後續章節中，我們按類別解釋了各種 Material Icons 的用法和各自的輸出。

列印頁面