---
# System prepended metadata

title: "\U0001F3C5 Day 19 - 線上 icon 載入"
tags: [網頁切版直播班 - 2024 夏季班]

---

# 🏅 Day 19 - 線上 icon 載入

### Material Icons
[Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons)
> [Material Icons Guide](https://developers.google.com/fonts/docs/material_icons?hl=zh-tw)

1 需先 Material Icons Guide 中找到該 icon 的 CDN
```htmlembedded
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
```

2 點擊想要載入的 icon 即可從右欄找到程式碼 
![](https://imgur.com/xxyamO6.png)

>載入上述 CDN 會發現需移除 outlined 的部分，才能正確載入 icon ，可使用下列 CDN 便能載入各個樣式，像是：outline、filled、rounded、sharp、two tone(不須移除 outline)。
```htmlembedded
<link href="https://fonts.googleapis.com/css?family=Material+Icons%7CMaterial+Icons+Outlined%7CMaterial+Icons+Two+Tone%7CMaterial+Icons+Round%7CMaterial+Icons+Sharp" rel="stylesheet">
```

### Material Symbols
[Material Symbols](https://fonts.google.com/icons?hl=zh-tw&icon.set=Material+Symbols)

**選擇想要使用的 Icon**

點選 icon，出現右側欄
![](https://i.imgur.com/yDPBmc9.png)

將 **Static icon font** 區塊中 `<link>` 程式碼貼至 `<head>` 內
>可載入以下 CDN (此 CDN 為樣式 outline ，欲載入其他樣式需至該 icon 取得 CDN )
```htmlembedded
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
```

將 **Inserting the icon** 區塊中程式碼貼至 HTML 區塊內
[Material Symbols 載入範例](https://codepen.io/hexschool/pen/vYRKWqd)

Material Symbols 與 Material Icons 相同為 Google 提供的 Icon 服務，
差異為 
* Material Icons 無法透過官方設定做相關 Icon 的調整。
* Material Symbols 能更有彈性的調整 Icon （可參考此[官方文件](https://developers.google.com/fonts/docs/material_symbols?hl=zh-tw)）。

>若需對於不同區塊的 Icon 做調整，可參考此官方提供的 [CodePen](https://codepen.io/tomasdev/pen/VwyMzbZ/daacd5f6bfaecba5aa4209afc1a8a4e3)，使用`div`進行設定並包裹所需的元素。

### Bootstrap Icons
[Bootstrap Icons](https://icons.getbootstrap.com/)

1 需先 Bootstrap Icons 中找到該 icon 的 CDN
```htmlembedded
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
```

![](https://imgur.com/TMFNIZV.png)

2 點擊想要載入的 icon 即可從右欄找到載入方式，目前我們使用的是 Icon font 的載入方式
![](https://imgur.com/72xN5ZQ.png)

3.只要將這串直接貼上程式碼內，就可以將 icon 載入囉~
![](https://imgur.com/amUjbVN.png)


### 題目

練習使用 **Bootstrap Icons** 載入 Discord 的 icon 
![](https://imgur.com/Cl7xMUa.png)

與

練習使用 **Material Icons** 載入下方 icon 

![](https://i.imgur.com/5qWoCS6.png)
> paid、schedule、favorite_border、voicemail

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：
Bootstrap Icons：
https://codepen.io/jmimiding4104/pen/ZENrxOM

Material Icons：
https://codepen.io/hexschool/pen/GRxqyEP
 -->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | han | [Codepen](https://codepen.io/iamHanCheng/pen/KKjKExj) |
| 2 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/yLdezzO) |
| 3 | DoryH | [Codepen](https://codepen.io/dorihung/pen/LYKGzjQ) |
| 4 | Lobinda | [Codepen](https://codepen.io/Lobinda/pen/ZEdQXRL) |
| 5 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/WNqrZKv) |
|6|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/VwJeMGE)
| 7 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme) |
| 8 | s870012 | [Codepen](https://codepen.io/idzrvbnl-the-bashful/pen/LYKGzqB) |
| 9 | Theodore | [Codepen](https://codepen.io/GustavoFringgg/pen/KKjVXBz) |
| 10 | Mike | [Codepen](https://codepen.io/mike2049/pen/KKjVyKa?editors=1100) |
| 11 | yoishere | [Codepen](https://codepen.io/yoishere/pen/QWXyqmb) |
| 12 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/yLdezvJ) |
| 13 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/bGPEYEe) |
| 14 | ㄚ華 | [Codepen](https://codepen.io/rzzuehiv-the-vuer/pen/NWZxwrR) |
| 15 | anderson666 | [Codepen](https://codepen.io/goodmanbuild/pen/oNrboor) |
| 16 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/WNqrXyE?editors=1000) |
| 17 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/KKjVyzm)|
| 18 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/MWMKOMq)|
| 19 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/xxoZPZa)|
| 20 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/oNrbpLb) |
| 21 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/qBzbpKa) |
| 22 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/wvLMpwr) |
| 23 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/eYwJVbR) |
| 24 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/WNqrzEp) |
| 25 | david1819 | [Codepen](https://codepen.io/David-Lin-the-vuer/pen/VwJeXxZ) |
| 26 | kawa | [Codepen](https://codepen.io/z83xji6/pen/BagjrNo) |
| 27 | 黛西 | [Codepen](https://codepen.io/ChiashengLin/pen/KKjVRYL) | 
| 28 | Jim | [Codepen](https://codepen.io/JimChou/pen/oNrbyzo) |
| 29 | MY | [Codepen](https://codepen.io/ahmomoz/pen/GRboGPL) |
| 30 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/BagjPGW) |
| 31 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/oNrbMON) |
| 32 | gracechiang225 | [Codepen](https://codepen.io/gracechiang225/pen/BagjOOV?editors=1100) |
| 33 | chris | [Codepen](https://codepen.io/chrischen666/pen/WNqrgEK) |
| 34 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/bGPEmJd) |
| 35 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/yLdeQZj?editors=1100) |
| 36 | KevinHuang | [Codepen](https://codepen.io/qw-huang/pen/rNExozE) |
| 37 | shine_lalala | [Codepen](https://codepen.io/cdjpjets-the-solid/pen/OJeMrew) |
| 38 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/vYqLbbv) |
| 39 | 超立方體Andy |[Codepen](https://codepen.io/Andy-Yu-the-scripter/pen/rNExbpX)|
| 40 | emmayo |[Codepen](https://codepen.io/emmayo/pen/KKjVLbz)|
| 41 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/VwJeJEZ)|
| 42 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/gONPVmR) |
| 43 | fan_fan | [Codepen](https://codepen.io/fan1102/pen/Bagjgzo) |
| 44 | Yolanda | [Codepen](https://codepen.io/vcscqrtz-the-animator/pen/MWMKNpZ) |
| 45 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/bGPpGYw)|
| 46 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/XWLdbjK)|
| 47 | wind | [Codepen](https://codepen.io/wind7y/pen/XWLdbOg) |
| 48 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/ExBKVpd) |
| 49 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/YzoqqqY) |
| 50 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/rNEeerj)|
| 51 | hao jing | [Codepen](https://codepen.io/hjxu/pen/dyBGodq)|
| 52 | glen_69515|[Codepen](https://codepen.io/glenyaochih/pen/NWZNRRX)|
| 53 | Hedwig | [Codepen](https://codepen.io/adirehfz-the-encoder/pen/abgNwWK) |
| 54 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/PorNKOK) |
| 55 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/oNrxVWa) |
| 56 | GAVI | [Codepen](https://codepen.io/xmbbyswh-the-reactor/pen/eYwzmeb) |
| 57 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/yLdJaQQ) |
| 58 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/poXbNmJ) |
| 59 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/eYwZWRJ) |
| 60 | 阿蘇 | [Codepen](https://codepen.io/kukvzqps-the-solid/pen/wvLWqby) |
| 61 | n913239 | [Codepen](https://codepen.io/n913239/pen/gONMxqR) |
| 62 | 俊 | [Codepen](https://codepen.io/jun12079/pen/YzoWrwV) |
| 63 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/BagzmpX) |
| 64 |OSN|[Codepen](https://codepen.io/osncodepen/pen/ExByoNG)|
| 65 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/abgZqaB) |
| 66 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/QWXExEJ) |
| 67 | 咖 | [Codepen](https://codepen.io/daru-Ga/pen/bGPwbam) |
| 68 | ho_yc | [Codepen](https://codepen.io/Ho_HYC/pen/OJeXKrg) |
| 69 | Anna |[Codepen](https://codepen.io/Anna-Teng/pen/vYqXYXz?editors=1100)|
| 70 | 地瓜 | [Codepen](https://codepen.io/huangtzuchin/pen/RwzGNaw) |
| 71 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/ExBgWrJ) |
| 72 | xcx100 | [Codepen](https://codepen.io/c13026/pen/BagLZqB) |
| 73 | Asu | [Codepen](https://codepen.io/wuasu/pen/mdZrMxV) |
| 74 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/MWMjQvR) |
| 75 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/gONLqmg) |
| 76 | Steven1220 | [Codepen](https://codepen.io/Steven1220/pen/GRbWpYd) |
| 77 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/WNqjMNQ) |
| 78 | Enn | [Codepen](https://codepen.io/enntang/pen/KKjqKPy) |
| 79 | Emma | [Codepen](https://codepen.io/Emma0919/pen/vYqJLje) |
| 80 | qet1717 | [Codepen](https://codepen.io/gwteqexi-the-bold/pen/yLdoZZV) |
| 81 | Judy | [Codepen](https://codepen.io/yangchi/pen/PorOBWv) |
| 82 | 小翎 | [Codepen](https://codepen.io/debbielin/pen/RwzVzGa) |
| 83 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/VwJyLEM) |
| 84 | OZ | [Codepen](https://codepen.io/OZ_design/pen/MWMQVGK) |
| 85 | ji3di | [Codepen](https://codepen.io/jwuuhtxh-the-builder/pen/LYKdwPO?editors=1000) |
| 86 | zen | [Codepen](https://codepen.io/zen742937/pen/eYwrjzo) |
| 87 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/QWXJKrr) |
| 88 | Yunya | [Codepen](https://codepen.io/cookie1515/pen/PorXWzV) |
| 89 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/rNEgmoZ) |
| 89 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/YzobrMP?editors=1000) |
| 90 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/QWeOKgR?editors=1100) |
| 91 | eddiesun0526 | [Codepen](https://codepen.io/Eddie0526/pen/ExqEdyV) |
<!-- 
| No | Discord | [Codepen]() |
-->