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?

Answer 1

    @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/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/

Answer 2

Look at documentation below

Use this link in HTML

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

Answer 3

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>