Is there a Font available for the new Bootstrap Icons?

Question

Coming from Font Awesome I'd like to use the new Bootstrap Icons in my web project. Unfortunately the inclusion of Bootstrap Icons seems way more tedious in regard to the amount of code I have to insert.

What I'm looking for:

Take for example the icon bi-chevron-right. Is there any way to use Bootstrap Icons as a font? Pseudo-code:

<i class="bi bi-chevron-right"></i>

That way would have several benefits:

• Simple and clean inclusion of an icon.
• Better loading times since only 1 external file is included for all icons of the project.
• Way more flexibility where to place the actual icon library (consider for option b) that you change the path of the library, you'd have to update all references!).
• No hard-coding of the actual icon size since this can be controlled by plain CSS.

What the docs currently only offer:

The docs currently offer several ways of inserting icons. All of them include quiet some code to write.

a) directly embed the SVG:

<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z"/></svg>

b) or use an SVG sprite:

<svg class="bi" width="32" height="32" fill="currentColor">
    <use xlink:href="/path/to/bootstrap-icons.svg#chevron-right"/>
</svg>

c) or link an external image:

<img src="/path/to/bootstrap-icons/chevron-right.svg" alt="" width="32" height="32" title="Bootstrap">

(Not speaking of the CSS variant which is basically identical to option a), just more tedious.)

Or am I missing something?

Oppidan

What about CSS data: URIs containing Base64-encoded SVG? – Consignor

As written, yes, this is basically option a) justed wrapped in CSS. It is even more tedious because you have to base64 encode the SVG for every icon ... – Oppidan

There are ways to automate that though, for example I have a T4 script in Visual Studio that auto-generates a CSS file with data URIs from all SVG files in my project. I posted it to a GitHub Gist here if you're interested: gist.github.com/Jehoel/6f73bf3154adca9c58b636386aff495e – Consignor

Answer 1

What also work is:

npm install bootstrap@next

npm install bootstrap-icons

then in your main.css

@import url('../../../node_modules/bootstrap-icons/font/bootstrap-icons.css');

and then in the HTML

<i class="bi bi-alarm"></i>

Delacroix

This really helped me resolve my issue! I tried to find a way of using bootstrap-icons without a CDN, just by importing the package. The homepage didn't clarify the proper way of importing the icons and the internet wasn't that reliable since it only showed how you could import the icons via the CDN! – Analyst

you can also just use url('bootstrap-icons/font/bootstrap-icons.css'), which is cleaner and references node_modules by defaylt – Layer

Answer 2

    @import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css");
.example:before {
  position: absolute;
  top: 20px;
  display: inline-block;
  font-family: bootstrap-icons;  
  font-style: normal;
  color: red;
  margin-right: 0px;
  content: "\F415";
  left: 10px;
}

Bootstrap 5 icon font family is - "bootstrap-icons" For Reference check - https://icons.getbootstrap.com/icons/heart-fill/

Estrella

Answer 3

Look at documentation below

Use this link in HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

Tribesman