---
# System prepended metadata

title: "\U0001F3C5 Day 20"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 20

## 線上 icon 載入

### Font Awesome
[Font Awesome 官網](https://fontawesome.com/search?m=free)
> 目前版本為 v6.1.1
> [使用文件](https://fontawesome.com/docs/web/setup/get-started)

**載入 Font Awesome**

在 HTML `<head>` 內加入下方 CDN

```htmlembedded=
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer">
```
使用 Codepen 時，也可以直接在設定中 CSS 區塊「Add External Stylesheets/Pens」加入 CDN URL（如圖）

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

**選擇想要使用的 Icon**
> 有些需要付費的 icon 無法載入

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

以此 icon 為例，將 HTML 區塊的程式碼複製，貼到自己的 HTML 檔案中就可以呈現出來了 ～
[Font Awesome 載入範例](https://codepen.io/hexschool/pen/MWVeOQd)

### Material Icons
[Material Icons](https://fonts.google.com/icons)
> [Material Icons Guide](https://developers.google.com/fonts/docs/material_symbols)


**選擇想要使用的 Icon**
點選 icon，出現右側欄
![](https://i.imgur.com/yDPBmc9.png)

將 **Static icon font** 區塊中 `<link>` 程式碼貼至 `<head>` 內
將 **Inserting the icon** 區塊中程式碼貼至 HTML 區塊內
[Material Icons 載入範例](https://codepen.io/hexschool/pen/vYRKWqd)

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

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



## 回報流程

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

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

<!-- 解答：https://codepen.io/hexschool/pen/GRxqyEP -->


回報區
---


|      Discord      |                           CodePen / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|     薏慈#3795     |           [CodePen](https://codepen.io/its_wang/pen/vYRaVbW)        |
|     Anna Liu#3794     |           [CodePen](https://codepen.io/anna618/pen/oNqwqjo)          |
|     小鐵#2814     |           [CodePen](https://codepen.io/xiron/pen/poLwvGZ)           |
|     𝓛𝓊𝒸𝓎#8635     |         [CodePen](https://codepen.io/lucygirl/pen/GRxjdJQ)          |
|   CloThEs#2406    |         [CodePen](https://codepen.io/hexschool/pen/MWVeOQd)         |
|  Clara Cai#7097   |        [CodePen](https://codepen.io/Clara-Snowy/pen/vYRZYaP)        |
|      YC#2522      |           [CodePen](https://codepen.io/YCLu/pen/wvmeBwG)            |
|    黃士桓#7654    |      [codePen](https://codepen.io/shr-huan-huang/pen/RwMgwXX)       |
|    布魯諾#7239    |         [CodePen](https://codepen.io/bruno-yu/pen/ExEXaYR)          |
|   Amberhh#2465    |          [Codepen](https://codepen.io/Amberhh/pen/WNzONVo)          |
|    Clara#1275     |         [CodePen](https://codepen.io/bsupixqu/pen/rNdwaOv)          |
|     L0F0#8733     |           [Codepen](https://codepen.io/l0f0/pen/BarZyaj)            |
|  christina#6185   |        [Codepen](https://codepen.io/chrisc0210/pen/eYMRmvK)         |
|      YI#0863      |          [Codepen](https://codepen.io/YI0305/pen/eYMRmEj)           |
|    JackC#0411     |          [Codepen](https://codepen.io/key0329/pen/XWEgJZy)          |
|      Ke#1391      |         [Codepen](https://codepen.io/federerke/pen/GRxEgdj)         |
|     int#7518      |   [Codepen](https://codepen.io/intHuang/pen/VwXWYRe?editors=1100)   |
|  PeggyLiao#1552   |  [CodePen](https://codepen.io/PeiJu-Liao/pen/OJvgPzW?editors=1100)  |
| bonnieli1414#4906 | [Codepen](https://codepen.io/bonnieli1414/pen/ZExyYjq?editors=1100) |
|  Potatolee#7749   |        [Codepen](https://codepen.io/potatoleee/pen/WNzObqz)         |
|     群嘉#3943     |   [CodePen](https://codepen.io/efzdamnp-the-lessful/pen/ZExyYgw)    |
|   LinaChen#1796   |         [CodePen](https://codepen.io/LinaChen/pen/OJvgPej)          |
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/ExEXaWO)          |
|     威爾#1694     |          [CodePen](https://codepen.io/WILL_Wu/pen/xxWrbMv)          |
|     小諾#1866     |          [CodePen](https://codepen.io/noichan/pen/XWEgbdv)          |
|    azami#5986     |           [CodePen](https://codepen.io/azami/pen/KKoqppG)           |
|     Hsiu#8767     |         [CodePen](https://codepen.io/amy-hsiu/pen/GRxEJpE)          |
|    Benson#6763    |         [CodePen](https://codepen.io/kumashow/pen/xxWrGOG)          |
|    楓之聲#6945    |         [CodePen](https://codepen.io/sshane258/pen/wvmeaoj)         |
|   Jenny真#7532    | [CodePen](https://codepen.io/wei-chen-wu/pen/qBojdqZ?editors=1000)  |
|    Arista#5802    |       [CodePen](https://codepen.io/arista-hsieh/pen/NWYgqjL)        |
|     洋蔥#5295     |           [CodePen](https://codepen.io/HSUNA/pen/gOeRpoe)           |
| JingXuanLin#3371  |         [CpdePen](https://codepen.io/YouShuang/pen/ZExyGed)         |
|  Ron Liang#7277   |          [CodePen](https://codepen.io/ron-go/pen/RwMVyxa)           |
|   WEI_RIO#9342    |    [CodePen](https://codepen.io/wei_wu/pen/jOzwPzJ?editors=1100)    |
|    leeli#6243     |   [CodePen](https://codepen.io/leelilee/pen/ExEXjLK?editors=1100)   |
|  Karol-Kuo#5287   |        [CodePen](https://codepen.io/ting-yu-kuo/pen/mdxwJYK)        |
|    黑白兔#0684    |         [CodePen](https://codepen.io/johnny329/pen/JjLJdLR)         |
|     威0#6919      |        [Codepen](https://codepen.io/n0918679182/pen/eYMRpdB)        |
|     QOO#8446      |   [Codepen](https://codepen.io/QOOQOOQ/pen/abYwOqN?editors=1100)    |
|     yu魚#1330     |           [CodePen](https://codepen.io/Yu_yu/pen/ZExybwJ)           |
|     小白#2406     |        [CodePen](https://codepen.io/gracewhite/pen/xxWrwYY)         |
|    JarDar#6980    |         [codepen](https://codepen.io/jardarpen/pen/abYwvKq)         |
|     LINK#1933     |          [codepen](https://codepen.io/miyayoe/pen/abYwdVX)          |
|     yuyu#6310     |   [codepen](https://codepen.io/yuyu0905/pen/OJvgMBm?editors=1000)   |
|    阿翰 #1984     |         [codepen](https://codepen.io/JohnHan05/pen/LYdLGqE)         |
|    SASIMI#5099    |        [codepen](https://codepen.io/sashimi1327/pen/GRxrOgK)        |
|  Jamie Wu#9345   |         [CodePen](https://codepen.io/Wu220103/pen/rNdweNb)          |
|  雷雷#7844   |         [CodePen](https://codepen.io/lei-yi-jie/pen/QWmgNjB)          |
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/PoRjZXp) |
|    Fanglin#4054    |    [CodePen](https://codepen.io/flynn841028/pen/GRxEoPN)    |
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/ExEXKvj)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/qBojZoq)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/mdxwPXp)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/XWEgKLZ)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/RwMgGZP)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/QWmgGbx)|
| Yunei#6323 |[codepen](https://codepen.io/Yunei/pen/NWYgbgL)|
| Chi#7605 | [Codepen](https://codepen.io/YoChi84/pen/poLwNdB) |
| GARBO#6659 | [Codepen](https://codepen.io/garbo8130/pen/eYMRgKW) |
| RayChen#6088 | [Codepen](https://codepen.io/raychen1996/pen/WNzOpVz) |
|鴨鴨#9822|[Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/GRxEWVW)|
|Sentiment#4883|[codepen](https://codepen.io/Sentiments/pen/poLweXZ)
|Yuna Huang#2692|[codepen](https://codepen.io/Yuna1002/pen/MWVomEd)
|大衛#4869|[codepen](https://codepen.io/exnsrpjc/pen/dymRWBV)
|     YU #0618     |           [CodePen](https://codepen.io/yoken_/pen/XWEggmj)           |
|Shuo#1596|[codepen](https://codepen.io/chiangchungshuo/pen/XWEggZg)
| 我是泇吟 #5189 | [Codepen](https://codepen.io/kljuqbxs/pen/BarZZpE) |
| Mylène#2481 |[Codepen](https://codepen.io/hamajibashi/pen/BarZZva)|
| Vian#7338 |[Codepen](https://codepen.io/vianwu31/pen/yLKXpGE?editors=1100)|
| ajhappy#6488 | [Codepen](https://codepen.io/ajhappy5438/pen/rNdwJeg)|
| kevin8349#6131 | [Codepen](https://codepen.io/kun8349/pen/dymRdjW)|
| Vera#5592 | [Codepen](https://codepen.io/skvera/pen/vYRZRKr)|
| IreneY #0086 | [codepen](https://codepen.io/HalfPlannedJourney/pen/ExEXEJQ) |
| 咻蹦#1526 | [Codepen](https://codepen.io/emmasyu/pen/VwXWMwa?editors=1100)|
| WEI#0797 | [Codepen](https://codepen.io/wei-z/pen/XWEgomZ)|
| Daisy_Li#4231|      [codepen](https://codepen.io/lidairong-gmail-com/pen/vYRZMeB)|
| Jason1#2538 | [codepen](https://codepen.io/jotwxezb-the-encoder/pen/LYdLvmo) |
| Tori#1248 | [codepen](https://codepen.io/FlyTori/pen/rNdwgzE) |
| Melon#0380 | [codepen](https://codepen.io/BalaFang/pen/WNzOqbW) |
| 鉦勝 #8333 | [codepen](https://codepen.io/atckmax823/pen/NWYgQKx) |
| Joyce#3790 | [codepen](https://codepen.io/joycehuang/pen/LYdjNgR?editors=1100) |
|hua#9099|[Codepen](https://codepen.io/LHua/pen/WNzExjq)|
|Leo Song#8278|[Codepen](https://codepen.io/sunnylaba/pen/qBoXNoV?editors=1100)|
|suihsilan#9485|[Codepen](https://codepen.io/suihsilan/pen/JjLybpY)|
|Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/ZExJLWG)|
|肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/dymzVZM)|
|piha#9987|[Codepen](https://codepen.io/pihahaha/pen/JjLyOBr)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/LYdjMeM)|
|阿蘇#8351|[CodePen](https://codepen.io/susu3131/pen/KKovJwZ)|
| LHchien33#6232 |[CodePen](https://codepen.io/lin_chien/pen/gOexEjQ)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/gOeGOKB)|
|曼曼#8356|[CodePen](https://codepen.io/Vanyacheer/pen/BarwyZy)|
|Fang #4680| [Codepen](https://codepen.io/std95174/pen/OJvxMpL?editors=1100)|
| 柏PO #5617| [CodePen](https://codepen.io/apo_1798/pen/oNqGBRE)|
| jin.huang#4666| [CodePen](https://codepen.io/haha1196/pen/mdxBjMp)|
| kancheng#3915| [CodePen](https://codepen.io/kancheng/pen/zYWPwXX)|
| Nini Chen#5790| [CodePen](https://codepen.io/ninistyle/pen/LYdOzNq?editors=1100)|
|Deborah#0033| [CodePen](https://codepen.io/deborah-tsai/pen/KKoyRVK)|
|Tuhacrt#0008| [CodePen](https://codepen.io/Tuhacrt/pen/GRxOYqR)|
|Carrie #2750| [CodePen](https://codepen.io/carrie-wang/pen/VwXroZM)|
|mei#8421| [CodePen](https://codepen.io/Shila-Chen/pen/jOzYOBp)|
|Cream#3449| [CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/LYdepVY)|
|aki|[codepen](https://codepen.io/aki168/pen/OJvzEbJ)|
|choubree#4350|[codepen](https://codepen.io/BreeChou/pen/xxWrwZL)|
|rueee#7997|[codepen](https://codepen.io/Jull-C/pen/WNzMjzx)|
|sophiee #7015 |[Codepen](https://codepen.io/sophiee2727/pen/RwMQXGg)
|Jumpye#8601 |[Codepen](https://codepen.io/Jumpye/pen/OJvvQoK?editors=1100)
|鎔瑄#8578|[codepen](https://codepen.io/barbarayou/pen/abYYjjM) |
|ROKA#4051 |[Codepen](https://codepen.io/chengchiaoyi/pen/QWmmzMV?editors=1000)
|jeter#8014 |[Codepen](https://codepen.io/gi-tai-she/pen/jOzKqbd)
|紙飛機#1335 |[Codepen](https://codepen.io/paperplanea/pen/mdxKEba)|
|manson許#2295 |[Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/xxWJQOd)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/oNqQExV)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/XWEyZOO)|
|RuoAn#7124|[CodePen](https://codepen.io/LiauRuoAn/pen/PoRxXxr)|
|Bonnie邦妮#7529|[CodePen](https://codepen.io/Calista316/pen/dymQayw)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/eYMQXmx)|
|瑞瑞 #4605|[CodePen](https://codepen.io/tsai-li-ting/pen/mdxapex)|
|KT Hsieh#2861|[CodePen](https://codepen.io/KTHsieh/pen/rNvVpoM)