ruby-on-railstwitter-bootstrap

How to use bootstrap-icons with Rails 7.0?

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;

Solution

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