Material Icons CDN 引入全攻略 - 引入各種類別的 Icon
閱讀時間約 6 分鐘
這篇主要會透過 CDN 引入 Material Icons，並補足官方文件裡只有提到 Filled 類別的引用方式，但沒有提到其他類別的 CDN，像是 Outlined、Rounded、Sharp、Two tone 這些類別。
另外還會提到如何透過偽元素加入 Material Icons，現在我們就來看看如何引入吧！
步驟一：尋找想要引入的 icon 類別與程式碼
- 在 <head> 引入該類別的 CDN
官方文件主要是以 Filled 類別做示範，但沒有提及到引入其他類別的 CDN，主要是在原來的 CDN 連結後面加入 [+類別名稱]（但 Rounded 是例外），範例如下：
- 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 名稱
今天就介紹到這裡，希望大家可以順利引入哦！
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
「兒童性虐待製品」一詞越來越常被用來取代「兒童色情製品」。因描繪或呈現兒童的性相關製品，事實上是兒童性虐待的一種呈現及一種形式，因此不應被描述為「色情製品 (pornography)」。
專攻樂高成人市場的Icons系列，比起動則破萬的大型物件，其下不需澆水、不會枯萎、不用照顧、價格相對便宜的花卉系列，一直是滿受歡迎的產品，同樣的在2023年也不會缺席。
這篇文章將會講述 Blockout 的介紹和適合的材質。
這篇文章將會講述 Unity Shader 及簡單的模式設定。
這系列是我之前在EpicGames官方學習路徑「Journey to becoming an Environment Artist in UE4」留下來的筆記，目錄在此，歡迎參考
稍微深入Master Materials的技巧
從Material Design發表至今，Google的設計語言已經7歲了!然而，隨著生活環境的改變，人們的需求也從實用層面轉變到情感價值。因此，Google在2021年5月的開發者大會中推出最新的設計語言Material You，並特別強調其「個人化」使用者體驗。
以敘事而言，傳記電影可以分成兩類。其一，企圖講述人物一生起伏跌宕，可以讓人認識他的一生。其二，以特定事件為主軸，並讓觀眾專注於人物面對斯的心路歷程。近期上映的《梅艷芳》選擇了前者，後輩有機會走一回屬於她獨一無二的黃金年代。至於《史賓賽》則屬於後者，藉由一場節慶聚會，讓我們看到黛安娜的內心拉扯與抉擇。
賽斯對於實相的節錄：
你依照你的信心和期待創造你的實相，因此你理應小心地檢查它們。如果你不喜歡你的世界，那就檢查你自己的期待吧。每一個思想或多或少地都被你構成為實質。
你的世界是依照你自己思想所形成的忠實複製品......某些心電感應的情況存在，我們稱之為根本假設，每個個人潛意識裡都知道它們。利用這
為什麼現在的香味那麼容易模仿呢？因為現在，只要拿一小瓶香水，注入一種叫做「氣相層析儀」的機器裡，香水裡的原料就會被分離與分析出來，這樣的結果，讓香水的配方不再是機密，那香水公司如何保護自己家的產品呢？就是靠著 「內部原料」……
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
「兒童性虐待製品」一詞越來越常被用來取代「兒童色情製品」。因描繪或呈現兒童的性相關製品，事實上是兒童性虐待的一種呈現及一種形式，因此不應被描述為「色情製品 (pornography)」。
專攻樂高成人市場的Icons系列，比起動則破萬的大型物件，其下不需澆水、不會枯萎、不用照顧、價格相對便宜的花卉系列，一直是滿受歡迎的產品，同樣的在2023年也不會缺席。
這篇文章將會講述 Blockout 的介紹和適合的材質。
這篇文章將會講述 Unity Shader 及簡單的模式設定。
這系列是我之前在EpicGames官方學習路徑「Journey to becoming an Environment Artist in UE4」留下來的筆記，目錄在此，歡迎參考
稍微深入Master Materials的技巧
從Material Design發表至今，Google的設計語言已經7歲了!然而，隨著生活環境的改變，人們的需求也從實用層面轉變到情感價值。因此，Google在2021年5月的開發者大會中推出最新的設計語言Material You，並特別強調其「個人化」使用者體驗。
以敘事而言，傳記電影可以分成兩類。其一，企圖講述人物一生起伏跌宕，可以讓人認識他的一生。其二，以特定事件為主軸，並讓觀眾專注於人物面對斯的心路歷程。近期上映的《梅艷芳》選擇了前者，後輩有機會走一回屬於她獨一無二的黃金年代。至於《史賓賽》則屬於後者，藉由一場節慶聚會，讓我們看到黛安娜的內心拉扯與抉擇。
賽斯對於實相的節錄：
你依照你的信心和期待創造你的實相，因此你理應小心地檢查它們。如果你不喜歡你的世界，那就檢查你自己的期待吧。每一個思想或多或少地都被你構成為實質。
你的世界是依照你自己思想所形成的忠實複製品......某些心電感應的情況存在，我們稱之為根本假設，每個個人潛意識裡都知道它們。利用這
為什麼現在的香味那麼容易模仿呢？因為現在，只要拿一小瓶香水，注入一種叫做「氣相層析儀」的機器裡，香水裡的原料就會被分離與分析出來，這樣的結果，讓香水的配方不再是機密，那香水公司如何保護自己家的產品呢？就是靠著 「內部原料」……