筆記 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/bootstrap-icons@1.11.3/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": "bootstrap-icons@1.11.3",
"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');