How to use bootstrap-icons with Rails 7.0?

user_1058763 0
Viewed 2757

I'd like to use bootstrap-icons in my Rails 7.0 app, but icons are collapsed.

enter image description here

It should display "plus" icon (This image is in my old app).

enter image description here

I'm also getting ActionController::RoutingError.

08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff2?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff2"):
08:05:31 web.1  |   
08:05:31 web.1  | Started GET "/fonts/bootstrap-icons.woff?30af91bf14e37666a085fb8a161ff36d" for ::1 at 2021-12-30 08:05:31 +0900
08:05:31 web.1  |   
08:05:31 web.1  | ActionController::RoutingError (No route matches [GET] "/fonts/bootstrap-icons.woff"):

Here are steps I did:

  1. Created a new app by rails new my-app-name --css bootstrap

  2. Ran npm i bootstrap-icons (then I got "bootstrap-icons": "^1.7.2" in my package.json)

  3. Edited app/assets/stylesheets/application.bootstrap.scss like this:

      @import 'bootstrap/scss/bootstrap';
  @import 'bootstrap-icons/font/bootstrap-icons';
  @import 'custom';

  4. Wrote erb like this:

      <%= link_to new_project_path, class: "btn btn-primary" do %>
    <i class="bi bi-plus" aria-hidden="true"></i>
    New Project
  <% end %>

  5. Started my app by bin/dev

I read these pages but couldn't resolve the error;

twitter-bootstrap ruby-on-rails
3 Answers

I'm not sure if this is the best solution but it worked for me.

Run these commands;

npm i bootstrap-icons
npm i copyfiles
mkdir public/fonts
touch public/fonts/.keep
echo "/public/fonts/*" >> .gitignore
echo "\!/public/fonts/.keep" >> .gitignore

Add this line to app/assets/stylesheets/application.bootstrap.scss .

@import "bootstrap-icons/font/bootstrap-icons";

Edit "build:css" script in package.json like this.

"build:css": "copyfiles -f node_modules/bootstrap-icons/font/fonts/* public/fonts && sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules"

Start up server with bin/dev command then the bootstrap icons appeared!

enter image description here

EDIT

I found much simpler solution.

Install bootstrap-icons.

npm i bootstrap-icons

Add this line to app/assets/stylesheets/application.bootstrap.scss.

@import "bootstrap-icons/font/bootstrap-icons";

Edit config/initializers/assets.rb.

Rails.application.config.assets.paths << Rails.root.join("node_modules/bootstrap-icons/font")

Start up server with bin/dev command. That's all!

EDIT2

I'm trying a similar approach with FontAwesome and Tailwind. However, the fonts are not found in my browser. For example: http://localhost:4000/webfonts/fa-solid-900.woff2. Are you able to share an example path that is used with the bootstrap fonts? Thanks.

I could use FontAwesome like this:

Install npm.

npm install --save @fortawesome/fontawesome-free

Add the following line to app/javascript/application.js .

import "@fortawesome/fontawesome-free/js/all"

Edit ERB.

<i class="fas fa-arrow-right"></i>

Start up server with bin/dev command.

enter image description here

But I'm not sure about Tailwind.

user_10587630

Have you defined a font-face in your scss file?

I have this below my imports

@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");
}
user_8597620

In application.scss you can simply import

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");
user_81499360
Related