Google 圖示 介紹
基本圖示
要使用 Google 圖示，請在 HTML 頁面的 <head> 部分新增以下行：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
注意：無需下載或安裝！
將 material-icons 類新增到內聯元素並插入圖示名稱
示例
以下程式碼
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons" style="font-size:48px;">cloud</i>
<i class="material-icons" style="font-size:60px;color:red;">cloud</i>
</body>
</html>
結果顯示
cloud cloud cloud
自己試試 »
Google 圖示設計用於內聯元素。<i> 和 <span> 元素廣泛用於圖示。
注意： Material 圖示預設大小為 24px。
另請注意，如果更改圖示容器的顏色，圖示的顏色也會隨之改變。對於陰影以及任何透過 CSS 繼承的其他屬性，情況也一樣。例外是 CSS 的 font-size 屬性，它始終為 24px，除非另有指定。
可調整大小的圖示
雖然 Material 圖示可以縮放到任何大小，但推薦的字型大小為 18、24、36 或 48 畫素
示例
以下程式碼
<style>
/* 圖示大小規則：*/
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; } /* 預設 */
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
</style>
<i class="material-icons md-18">cloud</i>
<i class="material-icons md-24">cloud</i>
<i class="material-icons md-36">cloud</i>
<i class="material-icons md-48">cloud</i>
結果顯示
cloud cloud cloud cloud
自己試試 »
