icon-fontsbootstrap-icons

Is there a Font available for the new Bootstrap Icons?


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:

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?


Solution

  • 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>