0

I have installed Bootstrap icon like this link: https://icons.getbootstrap.com/#install

enter image description here

This is how I import the link and create the CSS file for Bootstrap Icon:

enter image description here

But then it still doesn't work. I still can't use the icon:

enter image description here

Did I do something wrong? Hope someone can explain this to me clearly because I am new to ASP.NET Core 6 and am still learning.

Thank you very much.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Hung Doan
  • 31
  • 1
  • 5
  • Need to clarify your question. Your issue is unable to show the Bootstrap icon on your web page? Or do you mean the code editor doesn't show the suggestion for the bootstrap icon CSS class when typing according to your last screenshot? – Yong Shun Oct 21 '22 at 04:03
  • they happened both. – Hung Doan Oct 21 '22 at 07:02

2 Answers2

0

Here is a working demo:

Try to add the css into Views/Shared/_Layout.cshtml,or you can add it into the view you want to use the icons:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

And then use the icons like this:

<i class="bi bi-train-front-fill"></i>

Then the result will be:

enter image description here

Yiyi You
  • 16,875
  • 1
  • 10
  • 22
  • It's weird that I put into _Layout.cshtml, it doesn't work, but when I put it into the View page I want, somehow, it works. But then it leads to a new question. If I use this code: `` somehow, it worked fine, I thought if we don't have this symbol at the end `/>` it will be wrong in HTML. Shouldn't it be like ``? – Hung Doan Oct 21 '22 at 07:13
  • I get the css in the [link](https://icons.getbootstrap.com/#install) you offered above.I think we only need to follow the offcial doc. – Yiyi You Oct 21 '22 at 07:45
  • understood. Cuz somehow the HTML kinda confuses me a little bit. – Hung Doan Oct 21 '22 at 08:01
0

If you want a local Bootstrap Icon installation. Are the SVG files also available locally?

The Bootstrap icons are based on SVG files see link https://getbootstrap.com/docs/5.2/extend/icons/#bootstrap-icons "...While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support..."

Therefore, the SVG files (over 1900) must be in the appropriate directory.

These can be downloaded via the ZIP file link https://github.com/twbs/icons/releases/tag/v1.10.2

Franz
  • 77
  • 1
  • 4