Proper way to include font-awesome

sage
20

Trying to include font-awesome the way you did. The following error is still showing.

Do you see what I am doing wrong?

Pasted image1906×117 43.8 KB

My bower.json looks like this:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Leslie Buying<lesliebuying@gmail.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.4",
    "font-awesome": "fontawesome#^4.7.0"
  },
  "devDependencies": {
    "font-awesome": "fontawesome#^4.7.0"
  },
  "fontawesome": {
     "main": [
       "./scss/font-awesome.scss",
       "./fonts/*"
     ]
   }
}
22

You need to specific overrides:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Leslie Buying<lesliebuying@gmail.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.4",
    "font-awesome": "fontawesome#^4.7.0"
  },
  "devDependencies": {
    "font-awesome": "fontawesome#^4.7.0"
  },
  "overrides": {
      "font-awesome": {
        "main": [
          "./scss/font-awesome.scss",
          "./fonts/*"
        ]
      }
    }
  }
1 Like
23

I tried this with overrides but still the same error shows up.

In the error it refers to dist/styles/~font-awesome

This should be dist/fonts/fontawesome-webfont.ttf right?

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.

1 Like
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";
3 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