Roots Discourse

Proper way to include font-awesome

#24

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

#26

My package is also named font-awesome

#27

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": [
        "./scss/font-awesome.scss",
        "./fonts/*"
      ]
    }
  }

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.

#28

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";
2 Likes
#29

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
#30

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

in bower.json

"font-awesome": {
  "main": [
    "./scss/font-awesome.scss",
    "./fonts/*"
  ]
}
#31

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://github.com/twbs/bootstrap.git#v4.0.0-alpha.6",
"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

#32

Youā€™re missing the overrides

1 Like
#33

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

#34

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

#35

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

1 Like
#36

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

#37

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

3 Likes
#38

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.

#39

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.

2 Likes
#40

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

Please follow this:

2 Likes
#41