ASP.NET MVC Using Bootstrap Icons
2024-01-04
筆記 ASP.NET MVC 專案開發，如何加入 bootstrap-icons，在開發的過程能夠輕鬆地加入各式 icons 豐富網頁呈現。
說明
| icon | hint |
|---|---|
| bi-airplane | |
| bi-arrow-right | |
| bi-chat-dots |
完整的 icon 清單可以參考 icons.getbootstrap
首先直接在 Site.css 加入 @import 引用 bootstrap-icons 的 cdn url。
/Content/Site.css
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");如此一來就可以直接在 View 當中使用囉 😀
<i class="bi bi-airplane" style="font-size:2rem"></i>
<i class="bi bi-arrow-right" style="font-size:2rem"></i>
<i class="bi bi-chat-dots" style="font-size:2rem"></i>但對於無法連線外部資源的環境 (金融單位內部網站之痛 😥)，更適合的做法可能是將檔案本地化，包含在專案本身。
此將檔案本地化的方式，也可以讓 Visual Studio 的 intellisense 發揮作用，
於是可以透過 libman 來進行設定，但不需要所有的 svg 檔案只需要挑選特定的檔案即可，詳細的設定如下。
libman.json
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"provider": "jsdelivr",
"library": "[email protected]",
"destination": "lib/bootstrap-icons/",
"files": [
"font/fonts/bootstrap-icons.woff",
"font/fonts/bootstrap-icons.woff2",
"font/bootstrap-icons.css",
"font/bootstrap-icons.json",
"font/bootstrap-icons.min.css",
"font/bootstrap-icons.scss",
"README.md",
"package.json",
"LICENSE",
"bootstrap-icons.svg"
]
}
]
}最後再調整原本的 Site.css 的引用位址即可 😄
/Content/Site.css
@import url('../lib/bootstrap-icons/font/bootstrap-icons.min.css');