Unable to import font-awesome

rubyonrails-talk
1

I created a project using the “-c bootstrap” flag. I tried following the official instructions here:

which includes installing a gem and then doing an @import "font-awesome in my application.bootstrap.css file. Unfortunately it doesn’t work, I get the following error on the rendered webpage:

Error: can’t find stylesheet to import

Any help?

2

:confused: pdate:

So after a lot of floundering about, where I tried various things, I managed to import as follows:

/*
 *= require font-awesome
 */

Is this fine or might I expect other problems by doing it this way?

Also, while I admit I’m fairly new to Rails - and possibly not that bright - but is the whole “assets pipeline” business really supposed to be this complicated and problematic to use?

(I also had problems earlier when I was following Hartl’s Rails tutorial, and trying to import bootstrap his way, instead of with the -c bootstrap flag was actually triggering a segmentation fault on my MacOS system.)

3

After a fair amount of trial and error and Googling it dawned on me that since building an app with the -c bootstrap flag introduces the Yarn package manager into the equation, that is how you are supposed to add new front end libraries.

From the command line you can type yarn add @fortawesome/fontawesome-free, as it says here (not sure if that “fortawesome” is a typo or what, but it’s copied straight from the page), and then in the application.bootstrap.css file you should be able to do your @import.

4

I am also using the -c bootstrap flag with my installation. Upon closer inspection of the Font Awesome install inside node_module folder, I tried importing Font Awesome explicitly. That did the trick for me.

In application.bootstrap.scss, I added:

@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";

@import "@fortawesome/fontawesome-free/scss/brands.scss";
@import "@fortawesome/fontawesome-free/scss/regular.scss";

Then in application.js I also added:

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

import "@fortawesome/fontawesome-free/js/solid";
import "@fortawesome/fontawesome-free/js/brands";
import "@fortawesome/fontawesome-free/js/regular";