# 🏅 Day 12 - 線上 icon 載入 線上 icon 是各大網站都很常見的內容，常用於點綴、增進畫面美感，目前也有許多免費線上 icon 圖庫提供給我們使用，我們只需要正確載入相關檔案，即可在自己的網站使用這些 icon 以下介紹 Material Icons、Bootstrap Icons 兩種圖庫的引入方式。 ### 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** 載入下方 icon ![](https://hackmd.io/_uploads/HJIwGCT-lg.png) > search、cart、person 與 練習使用 **Material Icons** 載入下方 icon ![](https://hackmd.io/_uploads/BJOafRaZee.png) > close ## 回報流程 將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 解答位置請參考下圖（需打開程式碼的部分觀看） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： Bootstrap Icons： https://codepen.io/fhljksmg-the-styleful/pen/bNdbMrb Material Icons： https://codepen.io/fhljksmg-the-styleful/pen/vEOBjZV --> 回報區 --- |#|Discord|CodePen / 答案| |:----:|:----:|:----:| | 1 | 孟 | [Codepen ](https://codepen.io/Mengru0503/pen/ogXOdyp) | | 2 | Calvin |[Codepen](https://codepen.io/CalvinChang/pen/bNdJMvJ)| |3|Saika|[CodePen](https://codepen.io/saika4501/pen/LEVvmvQ)| |4|Jerome|[CodePen](https://codepen.io/qsc002163/pen/KwpYePV)| | 5 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/ogXOdOq)| | 6 | pastor |[Codepen](https://codepen.io/peter_hung/pen/Pwqgaov) | | 7 | Hao |[Codepen](https://codepen.io/Howell/pen/bNdJKgV) | | 8 | 那個貓貓 |[Codepen](https://codepen.io/zorakao/pen/gbpyKPJ) | | 9 | 牛奶嘎 |[Codepen](https://codepen.io/Joyce-Niu/pen/OPVGEVK) | | 10 | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/LEVvrqv) | | 11 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/wBaZxMd) | | 12 | Jenna |[Codepen](https://codepen.io/abiscc14/pen/NPqmBra) | | 13 | 地瓜 |[Codepen](https://codepen.io/ChippyYU/pen/pvJBZGq) | | 14 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/LEVvBmp) | | 15 | 老屠 |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/emNojxw) | | 16 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/dPoLqPv?editors=1100) | | 17 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/YPXMvmz) | | 18 | Nooooora |[Codepen](https://codepen.io/Nora-Ch/pen/LEVvgEm) | | 19 | 西娜 |[Codepen](https://codepen.io/Sheena-the-encoder/pen/RNPOYrj) | | 20 | Sid |[Codepen](https://codepen.io/monkeybear721/pen/dPoLgQE) | | 21 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/RNPOqxo?editors=1100) | | 22 | 燕 |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/EajJOaG)| | 23 | cks40660 |[Codepen](https://codepen.io/CKS40660/pen/LEVvMGx) | | 24 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/pvJBqWz) | | 25 | NellyGuo |[Codepen](https://codepen.io/NNN-the-selector/pen/ByNEMzB) | | 26 | Fan |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/emNoXeb?editors=1100) | | 27 | 7Lun |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/vEOMPPx) | | 28 | Fang |[Codepen](https://codepen.io/Fang-the-encoder/pen/MYwRxZx) | | 29 | TY |[Codepen](https://codepen.io/Ted-Y/pen/ogXOVmL) | | 30 | 小懿 |[Codepen](https://codepen.io/YT-the-vuer/pen/PwqggmB) | | 31 | Tetsu |[Codepen](https://codepen.io/ttgchang/pen/ByNEEZq) | | 32 | Sam.S.T.Y | [CodePen](https://codepen.io/Sam-Yang-the-animator/pen/raVbgYY) | 33 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/ZYGZPmP) | | 34 | 社子畢卡索 |[Codepen](https://codepen.io/pen?template=myJgZJe) | | 35 | Chris Wang |[Codepen](https://codepen.io/Wang-Chris/pen/MYwRMaG) | | 36 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/KwpYOPb) | | 37 | Kiku |[Codepen](https://codepen.io/Kiku0110/pen/dPoLBEp?editors=1100) | | 38 | kashiwatei |[Codepen](https://codepen.io/kashiwatei/pen/raVbXNB) | | 39 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/WbvWqPy) | | 40 | Peggy |[Codepen](https://codepen.io/Peggy_C/pen/ZYGNzvJ) | | 41 | CBK |[Codepen](https://codepen.io/BK-C-the-styleful/pen/ogXRvRO) | | 42 | suemma |[Codepen](https://codepen.io/suemma/pen/bNdydme) | --> | 43 | Elvina |[Codepen](https://codepen.io/Elvina-the-selector/pen/wBabMaX?editors=1100) | | 44 | kate_bearchou |[Codepen](https://codepen.io/ydzfqmuh-the-selector/pen/qEdGNvO) | | 45 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/emNadpq) | | 46 | Satar |[Codepen](https://codepen.io/SatarKuo/pen/LEVobPe?editors=1100) | | 47 | ja4071 |[Codepen](https://codepen.io/SHAO-L/pen/zxGQNLQ) | | 48 | PK |[Codepen](https://codepen.io/Percy-Ku/pen/dPoEVvj) | | 49 | Geno Chen |[Codepen](https://codepen.io/kai-chen-the-sans/pen/XJbwZWp) | | 50 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/myJYXZb?editors=1100) | | 51 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/pvJmLbd) | | 52 | Eagle Huang |[Codepen](https://codepen.io/YuCi/pen/Kwpjwrj) | | 53 | Evelyn |[Codepen](https://codepen.io/ewdyvnmp-the-typescripter/pen/myJZrKp) | | 54 | Yan* |[Codepen](https://codepen.io/Yan-L/pen/gbpNGYj) | | 55 | 随縁 |[Codepen](https://codepen.io/anki0072011/pen/PwqrOjZ) | | 56 | NGNLzenos |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/dPoBwaW) | | 57 | Doreen翠翠翠 |[Codepen](https://codepen.io/cuei-sian-Wang/pen/ByNXyEV)| | 58 | YUCCC |[Codepen](https://codepen.io/taroooo/pen/zxGgKzV)| | 59 | 平平 |[Codepen](https://codepen.io/ypinpin/pen/azOeWpB)| | 60 | celia |[Codepen](https://codepen.io/Cindy-Ho/pen/PwqMXwG)| | 61 | tanuki_狸貓 |[Codepen](https://codepen.io/tanuki320/pen/NPGWpap) | | 62 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/gbaOmqL) | | 63 | Atian |[Codepen](https://codepen.io/A-Tian-Chen/pen/yyYyNoQ) | | 64 | 雅潔 |[Codepen](https://codepen.io/MOMOYA/pen/bNVdEgN) | | 65 | B |[Codepen](https://codepen.io/Babel777/pen/zxvGwrm) | | 66 | Lika |[Codepen](https://codepen.io/wlyvctff-the-solid/pen/ZYbbXzJ) | | 67 | Fancy |[Codepen](https://codepen.io/Fancy-the-lessful/pen/wBKKqba?editors=1100) | | 68 | 主委加碼啦幹 |[Codepen](https://codepen.io/popbob-the-bashful/pen/PwPZpvv) | | 69 | water | [Codepen](https://codepen.io/wateruby/pen/ByooGwY)| |70| 小趴| [Codepen](https://codepen.io/papa2415/pen/MYaymoJ)| | 71 | Sylvie |[Codepen](https://codepen.io/shuping-xiao/pen/WbQwOGE?editors=1100) | | 72 | Lucy |[Codepen](https://codepen.io/Lucytrycode/pen/KwdzqGB) | | 73 | 伊迪 |[Codepen](https://codepen.io/eku10rei/pen/ByozBjE) | | 74 | KOMATSU PEI |[Codepen](https://codepen.io/Komatsu2021/pen/yyYVgOJ?editors=1100) | | 75 | 大頭祐祐 | [Codepen](https://codepen.io/Big_Head_YK/pen/YPypxMp) | | 76 | cindy |[Codepen](https://codepen.io/a50134/pen/pvjRYqb) | | 77 | Midy Wu |[Codepen](https://codepen.io/work-wu/pen/PwPJWBj) | | 78 | Mini |[Codepen](https://codepen.io/miiinii32-Cheng/pen/WbQzZzY?editors=1010) | | 79 | 4ping | [Codepen](https://codepen.io/928Libra/pen/ByoVyxo) | 80 | maerc |[Codepen](https://codepen.io/Lu-Liangyu/pen/XJmxvWL) | | 81 | Wafa |[Codepen](https://codepen.io/dqricwgo-the-reactor/pen/PwPXvpB) | | 82 | PAgaNiNi |[Codepen](https://codepen.io/PA-OTTER/pen/JoYqrOg?editors=1100)| | 83 | 星雪糖 |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/GgoZEWx)| <!-- 快速複製 --> <!-- | 排序 | 姓名 |[Codepen](連結) | -->