🏅 Day 20 - HackMD

--- 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)  回報區 --- | 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)