這篇主要會透過 CDN 引入 Material Icons，並補足官方文件裡只有提到 Filled 類別的引用方式，但沒有提到其他類別的 CDN，像是 Outlined、Rounded、Sharp、Two tone 這些類別。
另外還會提到如何透過偽元素加入 Material Icons，現在我們就來看看如何引入吧！
步驟一：尋找想要引入的 icon 類別與程式碼
- 在 <head> 引入該類別的 CDN
- Filled：不用加入任何類別，預設就是 Filled 類別的 icon
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
- Outlined
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
rel="stylesheet"
/>
- Rounded：要特別注意是加入 Round，不是 Rounded
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
rel="stylesheet"
/>
- Sharp
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
rel="stylesheet"
/>
- Two tone：注意兩個單字被拆開來加入
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
rel="stylesheet"
/>
- 到 Google Icons 找尋指定 icon
Material Icons 官網
- 點擊 icon 後會開啟右方的面板，先複製紅框處的程式碼，就能接續下個步驟引入到自己的網頁中，兩個方法擇一即可
Material Icons 官網
步驟二：引入到 HTML 中
方法1：直接貼入程式碼
<span class="material-icons-outlined"> search </span>
方法2：透過偽元素寫入到 HTML 中
很適合用在有大量重複的 icon，例如列表圖案。這裡的 font-family 是重點！如果沒有寫入正確的值就不會有效果，但在官方文件中也是除了 Filled 之外，沒有提到不同類別的 font-family 的命名，測試後整理如下：
- Filled: "Material Icons"
- Outlined: "Material Icons Outlined"
- Sharp: "Material Icons Sharp"
- Rounded: "Material Icons Round"
- Two tone: "Material Icons Two Tone"
.list-icon li::before {
content: "search";
font-family: "Material Icons Outlined";
}
這樣就大功告成了！附上完整的程式碼，供大家複製過去看看效果～
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet" />
<style>
.list-icon li::before {
content: "lightbulb";
font-family: "Material Icons Outlined";
}
</style>
</head>
<body>
<span class="material-icons-outlined"> search </span>
<ul class="list-icon">
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
</body>
</html>
問題
Q. 如何才能放大引入的 Material Icons？
使用 font-size 屬性就可以囉！
Q. 為什麼我的 Material Icons 無法成功引入？
可以檢查以下幾個部分：
- CDN 引入路徑是否正確和有無引入
- material-icons 的名稱和 class 是否正確
- 如果有使用偽元素，必須確認 font-family 屬性是否設定正確和 content 屬性有寫入正確的 icon 名稱
今天就介紹到這裡，希望大家可以順利引入哦！
