Roots Discourse

Proper way to include font-awesome

Check your package names. My overrides line is called font-awesome but it looks like your package is named fontawesome (without the hyphen).

My package is also named font-awesome

I’m having the same problem as @lesliebuying with Sage 9. Here’s applicable part of my packages.json file:

"dependencies": {
    "font-awesome": "^4.7.0",
    "jquery": "1.12.4 - 3",
    "materialize-sass-origin": "^0.97.5",
  "overrides": {
    "font-awesome": {
      "main": [

There are no errors when running yarn run build or yarn run start. But I get the “Module not found: Error: Cannot resolve…” error when I run yarn run build:production.

I got it to work by defining the font path before including it in my main.scss file as follows:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

Thanks for posting your fix. I don’t believe you should need to write overrides in packages.json anymore, since that was used by the asset builder plugin that was written for Sage 8. Webpack is a lot more robust in finding assets though

1 Like

With Bower the file exist already in main.js:
@import "../../bower_components/font-awesome/scss/font-awesome.scss";

in bower.json

"font-awesome": {
  "main": [

I am using Sage 8.5.1 and what I did:

  1. bower install --save fontawesome
  2. gulp
  3. gulp watch

In my bower.json I have:

"dependencies": {
"bootstrap": "git://",
"tweenlite": "^1.11.5",
"gsap": "greensock#^1.19.1",
"jquery": "^3.2.1",
"font-awesome": "font-awesome#^4.7.0"

But in inspector it’s still looking for wrong path /dist/fonts/fontawesome-webfont.ttf

I already changed from fontawesome to font-awesome.

Any idea? Thanks

You’re missing the overrides

1 Like

thanks thats working. But one more question I need to do overrides for greensock or tweenlite as well ? thanks

Probably, but this topic is about Font Awesome. :blush:

Thanks! This post and the surrounding discussion in general helped me figure this one out.

1 Like

Thank you very much! Worked for me with Sage 9 Beta 3.

FYI — Sage 9 beta 3 includes the ability to include Font Awesome upon project creation so that you don’t have to do anything manually


I have installed 9.0.1 sage but it does not ask me to include font awesome.
I have try to add it with yarn add font-awesome
But it does not work.
Please help with steps how to add font awesome support right way.

Hey @skivan - I’m guessing it didn’t run the post-install scripts, then?

How to proceed depends on if you want Font Awesome 4 or 5.

If you want Font Awesome 4, I would just run the post-install preset script. In your theme directory, run this command:

./vendor/bin/sage preset

One of the steps when that script runs will ask you if you want to install Font Awesome.

If you want Font Awesome 5, see this thread: How to: Use Font Awesome 5 in your Sage theme,

PS - the other two post-install scripts you may want to run are:

./vendor/bin/sage config
./vendor/bin/sage meta

Those aren’t related to Font Awesome, but help with other theme setup tasks.


FYI, the Sage installer no longer includes the option to install Font Awesome as it was for version 4

Please follow this: