Search code examples
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:

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


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>