---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 切版任務 Day6 - Bootstrap icon 引入
> 此任務主要是學習 icon 資源載入，尚未學習過 Bootstrap 也可以嘗試練習看看

## 什麼是 Bootstrap Icons？
Bootstrap Icons 是由 Bootstrap 官方提供的一組免費、開源的 SVG 圖示庫。這些圖示可以與 Bootstrap 框架搭配使用，但它們是獨立的，意味著你可以在任何專案（無論是否使用 Bootstrap）中使用它們。

可以參考官方連結：https://icons.getbootstrap.com/

## 特色
Bootstrap Icons 的特色有以下幾點：
1. 免費且開源：基於 MIT 授權，可自由使用。
2. 純 SVG 格式：沒有額外的字體檔案，載入速度快。
3. 可自訂樣式：透過 CSS 控制大小、顏色等屬性。
4. 相容性高：可以在所有現代瀏覽器中使用。

## 題目
複製此 [CodePen](https://codepen.io/yen-kg/pen/ZYEqvGw?editors=1010) 模板，並且挑選兩個 icon，練習加入到畫面中即可。

> BS5 CSS 載入連結已放在 head 處

## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答：
<i class="bi bi-alarm-fill"></i>
<i class="bi bi-apple"></i>
-->

回報區
---

| 報數 | Discord 名字 | CodePen／其他回饋 |
|:----:|:------------:|:-----------------------------------------------------------------------------:|
| 1 | 4chan | [CodePen](https://codepen.io/ijuolaqc-the-looper/pen/vEEjgGv?editors=1010)|
|2|小趴|[Codepen](https://codepen.io/papa2415/pen/oggdBWa)|
| 3 | dean |[Codepen](https://codepen.io/ch933114/pen/azzGpEK)|
| 4 | 叮咚 |[Codepen](https://codepen.io/pinchieh-lin/pen/vEEjgao?editors=1010)|
| 5 | Daniel Huang |[Codepen](https://codepen.io/Hou-Chieh-HUANG/pen/VYYxPEO)|
| 6 | 馬德 |[Codepen](https://codepen.io/maywang/pen/zxxjNbJ)|
| 7 | 蛋白 |[蛋白的Codepen Day6](https://codepen.io/sjlu-0/pen/EaaLWYO)|
| 8 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/RNNyprr)|
| 9 | 謝天 | [CodePen](https://codepen.io/crisxie/pen/MYYGpbB)|
| 10 | Toung | [CodePen](https://codepen.io/Toung/pen/YPPLZpy)
| 11 | WAWATA | [CodePen](https://codepen.io/wa-wa-GNOHC-WA-Wa/pen/qEEYrYd)
| 12 | pastor | [Codepen](https://codepen.io/peter_hung/pen/VYYxpMe)|
| 13 | 消波塊 | [CodePen](https://codepen.io/PaulHsiao/pen/yyyjMpR)|
| 14 | Sylvia | [Codepen](https://codepen.io/Sylvia93458/pen/yyyjbam)|
| 15 | ying | [Codepen](https://codepen.io/Lara-Lin/pen/vEEjxgL?editors=1111)|
| 16 | Zing | [Codepen](https://codepen.io/TZU-YIN-WANG/pen/gbbzWdQ)|
| 17 | Ataya |[Codepen](https://codepen.io/zin-seven/pen/YPPLVRL)|
| 18 | BaLaLaYOU | [CodePen](https://codepen.io/bashawxd-the-bashful/pen/KwwRmbw)|
| 19 | 登登登 | [CodePen](https://codepen.io/Duncanin/pen/myyLmML)|
| 20 | 柔術小子 | [CodePen](https://codepen.io/Li-Lee-Everything-is-PM/pen/KwwRmJp)|
| 21 | Archang | [CodePen](https://codepen.io/pxfnrvgk-the-styleful/pen/WbbJjea)|
| 22 | RUDY | [CodePen](https://codepen.io/Rudy-crw/pen/GggdEJe?editors=1100)|
| 23 | hank_08123 | [CodePen](https://codepen.io/hankyang1213/pen/wBBjeGv)|
| 24 | connieK8888 | [CodePen](https://codepen.io/plkang3617/pen/VYYxzKY)|
|25 | 吉 | [CodePen](https://codepen.io/ji087303/pen/YPPLQGd)|
|26 | Aoi | [CodePen](https://codepen.io/zching07/pen/zxxjzPR)|
|27 | B | [CodePen](https://codepen.io/Babel777/pen/azzGwaa)|
|28 | Melanie | [CodePen](https://codepen.io/pnrcspte-the-animator/pen/bNNMRxe)|
| 29 | Joseph_Kyuu | [CodePen](https://codepen.io/zrzfastd-the-reactor/pen/ZYYoJVZ)|
| 30 | tina01170 | [CodePen](https://codepen.io/tina-huang-the-bashful/pen/YPPLxmZ)|
| 31 | cks40660 | [CodePen](https://codepen.io/CKS40660/pen/YPPLrja)|
| 32 | 随縁 | [CodePen](https://codepen.io/zuien/pen/RNNyjwq)|
| 33 | Klaus Chen | [CodePen](https://codepen.io/Klaus-Chen/pen/xbbjpKM)|
| 34 | wei_0982 | [CodePen](https://codepen.io/nico-lai/pen/WbbJdRX)|
| 35 | Cami | [CodePen](https://codepen.io/irisLife/pen/LEEmQER)|
| 36 | akkk | [CodePen](https://codepen.io/ak-wu-the-decoder/pen/wBBjyoE)|
| 37| Saika|[Codepen](https://codepen.io/saika4501/pen/pvvVaOv?editors=1101)|
| 38| ann.328|[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/raavJqL)|
| 39| Stan|[Codepen](https://codepen.io/Stan-Huang/pen/bNNMLoO)|
| 40 | 冠翔 | [CodePen](https://codepen.io/hsrfcdrx-the-bold/pen/VYYxQyr)|
| 41 | WEIWEI | [CodePen](https://codepen.io/weiwei93/pen/zxxjzJa)|
| 42 | 力文 | [CodePen](https://codepen.io/liwenchiou/pen/ZYYoxGB)|
| 43 | carrie0416 | [CodePen](https://codepen.io/Hong-Carrie/pen/emmrMvR)|
|44| 7Lun | [Day6-CodePen](https://codepen.io/mfyvqhsn-the-bold/pen/MYYGVQo?editors=1010)|
| 45 | nora_zizi | [CodePen](https://codepen.io/Nora-Ch/pen/XJJqEZV)|
| 46 | CBK | [CodePen](https://codepen.io/BK-C-the-styleful/pen/LEEmddX)|
| 47 | Jinie | [CodePen](https://codepen.io/jiniecheung/pen/RNNyyZR
| 48 | Jessie | [Jessie 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/wBBjjmr)
| 49 | Cyan66 | [Codepen](https://codepen.io/Cyan66/pen/oggddEX)
| 50 | An | [CodePen](https://codepen.io/bzrpsbjq-the-encoder/pen/bNNMvKp)
| 51 | Holly | [CodePen](https://codepen.io/LEE-HOLLY/pen/vEEjjLO)
| 52 | fishcold9714 | [CodePen](https://codepen.io/yu-han-feng/pen/raavvrb)
| 53 | leo_tzou | [CodePen](https://codepen.io/JH_Portfolio/pen/raavvbE)|
| 54 | 野鴿 | [CodePen](https://codepen.io/HoshinoSyouta/pen/qEEYKmR?editors=1010)
| 55 | 清蒸蚊子(avytaurus) | [CodePen](https://codepen.io/jtmlthhe-the-bashful/pen/xbbjzqE)
| 56 | haohaoliao | [CodePen](https://codepen.io/tqdtaouh-the-styleful/pen/qEEYKXr?editors=1100)
| 57 | Fang | [CodePen](https://codepen.io/Fang-the-selector/pen/QwwrxQR)
| 58 | BL | [CodePen](https://codepen.io/bonnieli1414/pen/pvvVKLz?editors=1111)
| 59 | 周周 | [CodePen](https://codepen.io/jhoujhou-the-decoder/pen/MYYGXZK)
| 60 | Ali | [CodePen](https://codepen.io/Alicia1117/pen/yyyjqeJ)
| 61 | tiffany871205 | [CodePen](https://codepen.io/Tiffany-Tai/pen/yyyjqNJ)
| 62 | 牛奶 | [CodePen](https://codepen.io/0omilko0/pen/MYYGBjJ)
| 63 | William Hsieh | [CodePen](https://codepen.io/lsaimqxa-the-vuer/pen/myyLjWg?editors=1100)
| 64 | mambo | [CodePen](https://codepen.io/chiang_mb/pen/MYYGBpp)
| 65 | Hugh | [CodePen](https://codepen.io/Hugh-Chen/pen/VYYxBEN)
| 66 | ArvinSu | [CodePen](https://codepen.io/Arvin-Su/pen/xbbjJvm)
|67|yang|[codepen](https://codepen.io/Yang-J/pen/emmrLoa?editors=1000)|
| 68 |holysi|[codepen](https://codepen.io/holysi/pen/OPPZoKz)|
| 69 |allen3290|[codepen](https://codepen.io/udadkudw-the-looper/pen/yyyjRom)|
| 70 |Owen He|[Codepen](https://codepen.io/owen1120/pen/bNNMQGX)|
| 71 |Yan|[Codepen](https://codepen.io/Yan-L/pen/xbbjQjz)|
| 72 |anson.www|[Codepen](https://codepen.io/zzkvrkzi-the-sans/pen/LEEmXvq)|
| 73 |Jane|[Codepen](https://codepen.io/jkmx/pen/LEEmaQJ)|
| 74 | mercury2508. | [CodePen](https://codepen.io/Mercury2508/pen/WbbyeVV)|
| 75 | Peggy | [CodePen](https://codepen.io/cpt23462599/pen/PwwaYXy)|
| 76 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/wBBXKwZ)|
| 77 | Kath | [Codepen](https://codepen.io/JLin-the-lessful/pen/qEEKbRG)|
|78|YuTing|[CodePen](https://codepen.io/venus50533/pen/dPPejxB)|
|79|Jingle0900|[CodePen](https://codepen.io/EvaLi0472/pen/YPPvLrz)|
|80|Chia__|[Codepen](https://codepen.io/Chia-the-encoder/pen/EaaReVp)
|81|cheryl|[Codepen](https://codepen.io/katrina-the-decoder/pen/XJJYGpp)
|82|Chuang|[Codepen](https://codepen.io/uidoytjq-the-solid/pen/JooBPaR?editors=1000)
|83|Leonard|[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/GggBZYy)
|84|HLC|[Codepen](https://codepen.io/pppbbb262626/pen/azzjEya)
|85|JHT|[Codepen](https://codepen.io/juanht/pen/dPPKJbr)
|86|蛋殼|[Codepen](https://codepen.io/weybrian/pen/NPPBZGe)
|87|Rogan|[Codepen](https://codepen.io/RoganHsu/pen/XJJPmPp?editors=1010)
|88|tung|[Codepen](https://codepen.io/oltsegon-the-looper/pen/WbbgwvZ)
|89|Aidd.|[Codepen](https://codepen.io/aiddchen/pen/KwwxMQP)
|90|oyll|[Codepen](https://codepen.io/dizzydog-rgb/pen/yyyxKzB)
|91|姜承|[Codepen](https://codepen.io/Troy0718/pen/vEEzzLQ)
|92|Tou|[Codepen](https://codepen.io/Datou-Huang/pen/GggXLva?editors=1100)
|93|Apple Pie|[Codepen](https://codepen.io/ymevqzjf-the-builder/pen/wBBYGRP?editors=1100)
|94|Sonia|[Codepen](https://codepen.io/YUJOU/pen/RNNejgZ?editors=1010)
|95|kelsonhouse|[Codepen](https://codepen.io/Kelson-House/pen/VYYEQNe)
|96|糰子|[每日任務D6](https://codepen.io/hiyuki-dango/pen/gbbZmGj)
|97|vima|[Codepen](https://codepen.io/chin7004/pen/pvvqxae)
|98|Astrid|[2025/5/13 DAY8](https://codepen.io/astrid321654/pen/xbbmmGZ)
|99|Rogan|[5/13 DAY8](https://codepen.io/RoganHsu/pen/wBBRNKV)
|100|小豬佩奇|[CodePen](https://codepen.io/HoPeiZhen/pen/ZYYVNBL)
|101|孟|[CodePen](https://codepen.io/Mengru0503/pen/dPPaMwa)
|102|duchi|[CodePen](https://codepen.io/sqaz0502/pen/VYYgmrE)
|103|ja4071|[CodePen](https://codepen.io/SHAO-L/pen/zxxbWMM)
|104|Mic|[CodePen](https://codepen.io/Mic-Pan/pen/yyywxMR)
|105|木乃伊 Kimi|[CodePen](https://codepen.io/veqjtzdb-the-lessful/pen/wBBZgqK)
|106|禹成林|[CodePen](https://codepen.io/useirin/pen/yyyrPxo)
|107| jean_ke| [CodePen](https://codepen.io/Jean-Ke/pen/raaEQKj)
|108|Nea| [CodePen](https://codepen.io/neacode/pen/jEPNEbP)
|109|富| [CodePen](https://codepen.io/spring40747/pen/JodjYdj)
|110|Katie| [CodePen](https://codepen.io/Katiekatiehsu/pen/bNddxpM)
|111|Lynn| [CodePen](https://codepen.io/Yen-Ling-Peng/pen/KwwYQjd)
|112|HedyChen| [CodePen](https://codepen.io/hedychen/pen/GgJZyLW?editors=1100)
|113|waynechen| [CodePen](https://codepen.io/waynetrece/pen/RNPpzJo)
|114|taishan_90178| [CodePen](https://codepen.io/candy99/pen/yyNpEaE)
| 115 | Yanchen16 |[CodePen](https://codepen.io/keyrtlij-the-reactor/pen/YPXLwNY)
| 116 | World |[CodePen](https://codepen.io/HexschoolVuePujols/pen/MYwqYmZ)