How to use bootstrap-icons with Rails 7 and importmaps

Question

New territory here: Rails 7.0.1, Ruby 3.1.0

rails new rails7app

bin/importmap pin bootstrap adds bootstrap to the app.

Bootstrap is a combination of js and css. bootstrap-icons seems to be basically css. With yarn/npm approach, yarn install bootstrap-icons works, but with Rails 7 and no npm bin/importmap pin bootstrap-icons does not work. Somewhat expected since this is css.

How do I add bootstrap-icons to a basic Rails 7 app?

Answer 1

Importmaps handles javascript only.

You will need to add bootstrap to your gem file

gem 'bootstrap', '~> 5.1', '>= 5.1.3'

It is recommended to uncomment the sassc-rails line in the gem file as well

gem 'sassc-rails'

Then you should be able to add a bootstrap import in your app/assets/stylesheets/application.scss

@import "bootstrap";

EDIT:

Apologies, in order to add the bootstrap-icon portion, your app/assets/stylesheets/application.scss needs to import the bootstrap-icon css as well. You can either reference the CDN at import or put the css in your /vendor folder and reference the relative path at import.

This is the app/assets/stylesheets/application.scss using the CDN method

@import "bootstrap";
@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css");

Then you can add icons to your view pages.

This code is on my home.html.erb and renders a blue alarmclock.

<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

Answer 2

See Joe Thor's first comment and this adds a workaround for something wrong in my set up. What is working for me is adding:

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

to application.html.erb and using the syntax suggested: <i class="bi bi-bootstrap text-success"></i>.

The syntax <%= icon("bootstrap", class: "text-success") %> looks in node-modules/… which aren't installed, so get an error. This is the syntax I had been using. More Railsy.

@import url("https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"); in application.scss is not working for some reason, although it seems it should.

Boostrap seems to be not helping by mixing svg icons and fonts to get "icons".