### 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`進行設定並包裹所需的元素。 ### IcoFont [IcoFont](https://icofont.com/) 是另外一種 icon 圖源，但載入方式相較起來更為複雜，可以跟著步驟嘗試載入。 1. 進入 [官方網站](https://icofont.com/) 後選擇要載入的圖庫進行下載(可整個圖庫或個別下載)。 >整個圖庫下載 直接點擊該類別的 Download 即可。 ![](https://imgur.com/FUf0X8Y.png) >個別下載 >1.點擊下方的的 + 。 ![](https://imgur.com/nBX3rtu.png) >2.選擇右上角的 collection 。 ![](https://imgur.com/g7JSS2j.png) >即可從內容下載。 2. 將檔案引入，可參考[官方指引](https://icofont.com/how-to-use)。 ```htmlembedded <link rel="stylesheet" href="myProjects/webProject/icofont/css/icofont.min.css"> ``` 官方指引為相對位置，須依據實際檔案位置修改。 >即載入 `icofont.min.css` 此支檔案，例如此檔案放置於 css 資料夾內，則須於 HTML 內的位置修改為 `./css/icofont.min.css` >此圖庫並不是直接將所有 icon 打包，而是依照使用者需求選擇 icon 下載後方能使用，這部分需特別注意。 ### 題目 練習使用 **Material Icons** 載入下方 icon ![](https://i.imgur.com/5qWoCS6.png) > paid、schedule、favorite_border、voicemail ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： https://codepen.io/hexschool/pen/GRxqyEP --> 回報區 --- |#| Discord | CodePen / 答案 | |:-:|:-----------------:|:-------------------------------------------------------------------:| |01|Moreene|[CodePen](https://codepen.io/Moreene/pen/dyQKXyr)| |02|Berlin|[CodePen](https://codepen.io/3qberlin/pen/JjeZKoe)| |03|Eden.C|[Codepen](https://codepen.io/iseden/pen/eYQKzNV)| |04|舜仁|[Codepen](https://codepen.io/randomno/pen/mdQKEry)| |05|billy_ti|[CodePen](https://codepen.io/Ti-Show/pen/jOQKrWm)| |06|cest_jessie|[CodePen](https://codepen.io/itsjessiechen/pen/dyQKXXE)| |07|peggydbc1217|[CodePen](https://codepen.io/peggydbc1217/pen/KKreMNX)| |08|kimlemon0720| [Codepen](https://codepen.io/znohmess-the-builder/pen/poQKbNd) | |09|Yu| [Codepen](https://codepen.io/yuch3n_chen/pen/MWzXeKO) | |10| Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/jOQKrBL) | |11| eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/ExORygd) | |12| AYA | [Codepen](https://codepen.io/NoNameNote/pen/vYQrKWO) | |13| stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/ZEmROaR) || |14| 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/YzRvWEP) | |15| lychee_kk | [Codepen](https://codepen.io/kakakala/pen/vYQrKaL) | |16| SKey#9905 | [Codepen](https://codepen.io/Dale-Chien/pen/YzRvWjy) | |17| SmallP | [Codepen](https://codepen.io/smallp/pen/abQKZGx) | |18| bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/xxQzOVQ?editors=1100) | | 19 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/JjeZKLq) | | 20 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/xxQzOWe) | | 21 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/WNYyxKX) | | 22 | shcopy | [Codepen](https://codepen.io/shcopy/pen/jOQKrpZ) | | 23 | m_m | [Codepen](https://codepen.io/minnn7716/pen/JjeZKxP) | | 24 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/KKreMOB?editors=1100) | | 25 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/QWJxKwx) | | 26 | Morning | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/xxQzEVG) | | 27 | runweiting | [Codepen](https://codepen.io/weiting14/pen/GRwGqbW) | | 28 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/NWEzRNz) | | 29 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/mdQKrVm) | | 30 | townyuan | [Codepen](https://codepen.io/townyuan/pen/OJaERpQ) | | 31 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/NWEzRjL) | | 32 | homer | [Codepen](https://codepen.io/Buckhorn/pen/qBQKaJr) | | 33 | Martin | [Codepen](https://codepen.io/markyourpage/pen/WNYyGPW) | | 34 | Ting.66 | [Codepen](https://codepen.io/Ting66/pen/KKreNgp?editors=1100) | | 35 | Calvin | [Codepen](https://codepen.io/CalvinChang/pen/ExORNQb) | | 36 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/OJaEboL?editors=1000) | | 37 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/ExORZaR) | | 38 | ss30304#9213 | [Codepen](https://codepen.io/ss30304/pen/GRwGrqJ) | | 39 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/bGQKgEw) | | 40 | Cura | [Codepen](https://codepen.io/curalin/pen/dyQKNwo?editors=1100) | | 41 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/XWyYpOG) | | 42 | fanglin.y | [Codepen](https://codepen.io/flynn841028/pen/gOQKgGr) | | 43 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/VwVdpPP?editors=1100) | | 44 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/oNQyBJg) | | 45 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/oNQyWNo) | | 46 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/ExORmYN?editors=1100) | | 47 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/MWzXmOb) | | 48 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/dyQKWKq) | | 49 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/YzRvVoM) | | 50 | MKL | [Codepen](https://codepen.io/Code-My/pen/YzRvVeJ)| | 51 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/VwVdWLN)| | 52 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/LYXrjRN) | | 53 | Lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/oNQyeMZ?editors=1100) | | 54| yunhsinnnnnnn| [Codepen](https://codepen.io/yun___hsin/pen/VwVdMeX) | | 55 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/BaGVdqO) | | 56 | hannahT | [Codepen](https://codepen.io/HanceKao/pen/rNQKMva) | | 57 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/mdQKqgr) | | 58 | .manmanlai | [Codepen](https://codepen.io/kikiyang/pen/eYQKeVj?editors=1100) | | 59 | Long | [Codepen](https://codepen.io/Loonng/pen/OJaEzxv) | | 60 | Uli | [Codepen](https://codepen.io/uli1313/pen/abQKLeK) | | 61 | wind | [Codepen](https://codepen.io/wind7y/pen/NWEzXzE) | | 62 | awei | [Codepen](https://codepen.io/hong-wei/pen/QWJxQwX) | | 63 | 狸貓 | [Codepen](https://codepen.io/tanuki320/pen/zYMaRYK) | | 64 | zona_0.0 | [Codepen](https://codepen.io/Zona-Chen/pen/JjeZLPa) | | 65 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/OJaEmWG) | | 66 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/BaGVxGO) | | 67 | Randy | [Codepen](https://codepen.io/landy510/pen/yLQEQBb?editors=1100) | | 68 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/zYMaMOR?editors=1100) | | 69 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/gOQKQRa) | | 70 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/JjeZwXo) | | 71 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/dyQKwJO) | | 72 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/WNYyLLL?editors=1100) | | 73 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/yLQEwLb) | | 74 | hebin. | [codepen](https://codepen.io/landyhsiao776/pen/vYQrPgo) | | 75 | Aritan#1931 | [codepen](https://codepen.io/Aritan/pen/abQKxZo) | | 76 | .dtou | [Codepen](https://codepen.io/conlyvrg-the-reactor/pen/vYQrMWm) | | 77 | 辣椒| [Codepen](https://codepen.io/chilichen118/pen/wvQXZEx) | | 78 | ROGER | [Codepen](https://codepen.io/Moreene/pen/dyQKXyr) | | 79 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/yLQEdKp) | | 80 | yuling#1634 |[Codepen](https://codepen.io/igzdflpu/pen/vYQroNK) | | 81 | soniawu |[Codepen](https://codepen.io/YUJOU/pen/zYMagjx) | | 82 | Johnson3669 |[Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/zYMLYxR) | | 83 | rjjq | [Codepen](https://codepen.io/rjjq/pen/zYMLKqX) | | 84 | FanJJ | [Codepen](https://codepen.io/yfchenn/pen/BaGPLKd) | | 85 | murphy1665 | [Codepen](https://codepen.io/icephy/pen/rNQrMYE) | | 86 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/WNYKoEV) | | 87 | PayRoom | [Codepen](https://codepen.io/water38198/pen/vYQagLM) | | 88 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/mdQqpEY) | | 89 | .ztion | [Codepen](https://codepen.io/ztion/pen/KKrBRdo) | | 90 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/NWEBMvy)| | 91 | peggy3169 | [Codepen](https://codepen.io/peggylai/pen/gOQjjxO) | | 92 | pss940909| [Codepen](https://codepen.io/pss940909/pen/dyQjBvQ) | | 93 | mm_ieat| [Codepen](https://codepen.io/MINN3/pen/VwVBomL) | | 94 | cyrus_li| [Codepen](https://codepen.io/likahang/pen/abQjMgP) | | 95 | Cosmos| [Codepen](https://codepen.io/violet7755/pen/poQVQqO) | | 96| Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/GRwyVVR)| | 97 | .icesam | [Codepen](https://codepen.io/icesam/pen/bGQxvbP)| | 98 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/GRwYgXN)| | 99 | EY | [Codepen](https://codepen.io/EY-chen/pen/PoxyPLo?editors=1100) | | 100 | jhen_ye | [Codepen](https://codepen.io/su-jhen/pen/ZEmqOve) | | 101 | celia9182 | [Codepen](https://codepen.io/celia01/pen/dyQgZzK)| | 102 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/oNQQgpR) | | 103 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/YzRRwEm) | | 104 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/LYXXWNg) | | 105 | 圈圈 | [Codepen](https://codepen.io/wjejfczn-the-bold/pen/ZEmmvze) | | 106 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/RwqqJpG) | | 107 | sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/XWyPxKW) | | 108 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/dyQQabb?editors=1100) | | 109 | swalok47716#7332 | [Codepen](https://codepen.io/swalok/pen/WNYYmwP) | |110 | patrickpie| [Codepen](https://codepen.io/patrickpie/pen/WNYLYaB) | | 111 | RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/oNQmjbL) | | 112 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/abQXjjN) | | 113 | WA | [Codepen](https://codepen.io/ldddl/pen/PoxLqGw) | | 114 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/qBQvNrd) | | 115 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/yLQrBEo) | | 116 | 阿富#0389 | [Codepen](https://codepen.io/spring40747/pen/wvQVKWv) | |117|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/qBQeQXK)| |118|JimmyChang|[Codepen](https://codepen.io/JimmyChangWenChi/pen/yLQmZdY?editors=1100)| |119|阿維#2569|[Codepen](https://codepen.io/gzzpwnbb-the-bold/pen/mdabGYr?editors=1100)| |120 |.rainielin| [Codepen](https://codepen.io/Yunchian-Lin/pen/abPdMKg) | |121 |ChrisSQR| [Codepen](https://codepen.io/ChrisSQR/pen/xxmdjEL) | |122 |楓| [Codepen](https://codepen.io/maplestartend/pen/wvOBzaY) | <!-- 快速複製 | | | [Codepen]() | -->