ASP.NET MVC Using Bootstrap Icons


  1. 說明
  2. 相關連結

筆記 ASP.NET MVC 專案開發,如何加入 bootstrap-icons,在開發的過程能夠輕鬆地加入各式 icons 豐富網頁呈現。

logo

說明

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');

相關連結

ASP.NET MVC 從無到有打造一個應用系統

Visual Studio 入門教學