Using Bootstrap Icons in Rails 6 with Webpacker

Question

I wanted to use Bootstrap icons in beta "Official open source SVG icon library for Bootstrap." https://icons.getbootstrap.com/. This is for Bootstrap 4 in Rails 6.

I tried various imports and includes in application.js and application.scss with no success

How do I accomplish this?

Answer 1

You need to override the default font definition to load the appropriate paths

yarn add bootstrap-icons

Then add to your application.scss:

@import "bootstrap-icons/font/bootstrap-icons";
@font-face {
  font-family: "bootstrap-icons";
  src: font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff2") format("woff2"),
    font-url("bootstrap-icons/font/fonts/bootstrap-icons.woff") format("woff");
}

Then you can use it:

<i class="bi bi-plus-circle"></i>

Make sure you have Rails.application.config.assets.paths << Rails.root.join('node_modules') in your config/initializers/assets.rb