# Proper way to include font-awesome

**URL:** https://discourse.roots.io/t/proper-way-to-include-font-awesome/4357
**Category:** sage
**Created:** 2015-07-28T03:47:29Z
**Posts:** 40

## Post 1 by @randi2kewl — 2015-07-28T03:47:30Z

I am curious if there is a best standards to including items like Font Awesome with the new version of Sage using Bower + Gulp? Having a bit of trouble getting the font files to load.

1. Did bower install of font awesome
2. Added the override to the bower.json file

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

A little stuck on what I am missing. CSS is pulling in fine but the fonts are not actually being loaded.

---

## Post 2 by @chrisatomix — 2015-07-28T04:00:05Z

I was literally just doing this on a project, perfect timing!

Edit: Deleted my incorrect answer, the official bower.json file for Font Awesome has a wildcarded fonts/\* path too.

---

## Post 3 by @kalenjohnson — 2015-07-28T04:05:41Z

FWIW, this works for me:

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

If you are running `gulp watch`, stop that after installing something with Bower, then run `gulp && gulp watch`

---

## Post 4 by @mackerson — 2015-07-29T18:00:46Z

@kalenjohnson that solution also fixed it for me, except I also had to add a hyphen (font-awesome)

---

## Post 5 by @kalenjohnson — 2015-07-29T18:14:31Z

Glad it’s working.

It’s also worth pointing out that Font Awesome _just_ changed their `bower.json` file, which is actually now in line with Bower’s `main` spec: [https://github.com/FortAwesome/Font-Awesome/commit/7cde41ea934f43e66dc123ea6411d8535b50a4f7](https://github.com/FortAwesome/Font-Awesome/commit/7cde41ea934f43e66dc123ea6411d8535b50a4f7)

So as more packages moving forward fall in line with Bower spec, we should require less overrides, except for those packages where we need images or fonts, in that case we will still need to set up overrides to pull those files into the `dist` folder.

---

## Post 6 by @Johnny_Bit — 2015-07-30T11:37:50Z

Once `files` spec lands into bower that too won’t be issue :smile:

---

## Post 7 by @John — 2015-08-15T19:10:10Z

Having a bit of a time trying to get Fontawesome to work. Ran into this post and the link above on github talking about overriding. I’m not sure I am understanding it correctly. Below is one of my iterations. I did several! Some direction would be great as I have spent the last hour trying to get this to work. Nothing is showing up. I did run through the normal “bower install --save fontawesome” . Thanks.

---

## Post 8 by @John — 2015-08-15T19:12:45Z

Oh wait. Maybe the wrong json file. lol. Ohh man.

Edit

Yeah, so I got it to work. I was just totally focused on a different file. Anyways, still needed to do the override for Fontawesome. Just an FYI for others that wonder why it doesn’t work through the normal process.

---

## Post 9 by @thathurtabit — 2015-09-17T16:41:33Z

> [@kalenjohnson](#):
>
> “fontawesome”: {  
> “main”: [  
> “./scss/font-awesome.scss”,  
> “./fonts/\*”  
> ]  
> },

Same for me! So:

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

---

## Post 10 by @ericgauvin — 2015-10-19T00:19:56Z

Ok I got this to work, but I don’t quite understand how it’s supposed to work.

I read the sage book and watched the bower video. I guess it’s changed since then.

I ran `bower install --save fontawesome`.

Then I ran `gulp`.

My sage bower file has `"font-awesome": "fontawesome#~4.4.0"` added to dependencies.

The font-awesome bower in bower\_components looks like this

```
"main": [
    "less/font-awesome.less",
    "scss/font-awesome.scss"
  ],
```

In the sage book the example is (same as override)

```
"main": [
   "./css/font-awesome.css",
   "./fonts/*"
]
```

I understand the override makes this work, but I don’t understand why the fontawesome bower file is the way it is and why it changed. How come the fontawesome bower file doesn’t have the line for fonts anymore?

Can someone explain?

---

## Post 11 by @kalenjohnson — 2015-10-19T00:29:05Z

Because it wasn’t until recently that the `main` declaration was actually finalized. You can read the final meaning of what it is here: [https://github.com/bower/spec/blob/master/json.md](https://github.com/bower/spec/blob/master/json.md)

How to declare assets is still somewhat up in the air

---

## Post 12 by @ericgauvin — 2015-10-19T00:35:59Z

Hmm… Interesting. Thanks.

Does this mean we’ll need to add overrides for most dependencies like this?

---

## Post 13 by @kalenjohnson — 2015-10-19T01:21:53Z

Actually for packages without requiring images or fonts, it should be easier and not require manual overrides

---

## Post 14 by @anthonymain — 2016-05-24T22:56:06Z

Hi guys,

Im new to Bower so this one has thrown me. I think I’m getting used to the principles and have successfully added font-awesome but am unsure which bower.json file I need to amend to get gulp to transfer the font files to the dist folder (I assume that is the expected result, looking at the css added to [main.cc](http://main.cc)).

Thanks

---

## Post 15 by @nadalsol — 2016-05-27T17:48:54Z

As @kalenjohnson suggested the `gulp && gulp watch` command is important. In other words, if you just stop gulp and the run `gulp watch` the fonts doesn’t get copied to your theme “dist/fonts/” folder.

So the process that worked for me is (notice the hyphen added in “font-awesome”):

**bower.json**

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

**command line**

Stop gulp and run `gulp && gulp watch`.

Hope it helps

---

## Post 18 by @neonbrand.com — 2016-10-13T06:00:28Z

After much research, I finally figured this out. Had to remove my previous two posts… my apologies for any over-posting this may have caused. Final answer is this.

I was having trouble locating where to put the snippet of code to override the default functionality. I had added the text to every freaking bower.json in my entire theme structure and still couldn’t get the `fonts` folder to pull into the `dist` directory. Then it hit me…

Here’s what my main theme bower.json file now looks like. File located at the root of the theme itself:

```
{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.4",
    "font-awesome": "fontawesome#^4.6.3"
  },
  "overrides": {
    "font-awesome": {
      "main": [
        "./scss/font-awesome.scss",
        "./fonts/*"
      ]
    }
  }
}
```

If this is the first override you’ve had to add, then the full text to add to the `bower.json` file is as follows:

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

We’re in business. Thanks!

---

## Post 19 by @Twansparant — 2016-12-15T09:08:03Z

How would this work in Sage 9 with **Webpack**?  
Because I’m getting errors on `npm run build:production`:

```
ERROR in ./styles/main.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.woff2 in /path/to/my/project/site/web/app/themes/sage/assets/styles
```

In my **main.scss** I import font-awesome like this:

```
@import "~font-awesome/scss/font-awesome";
```

I need to copy the font files over to my assets I guess?

---

## Post 20 by @lesliebuying — 2016-12-29T15:08:59Z

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

Do you see what I am doing wrong?

 ![](https://discourse.roots.io/uploads/default/original/2X/2/2bc78e32da9cd868594a3d80840e00890850710e.png)

**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/*"
     ]
   }
}
```

---

## Post 22 by @MWDelaney — 2016-12-29T21:40:00Z

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/*"
        ]
      }
    }
  }
```

---

## Post 23 by @lesliebuying — 2016-12-30T12:32:45Z

> [@MWDelaney](#):
>
> “overrides”: {  
> “font-awesome”: {  
> “main”: [  
> “./scss/font-awesome.scss”,  
> “./fonts/\*”  
> ]  
> }  
> }

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?

---

## Post 24 by @MWDelaney — 2016-12-30T19:00:16Z

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

---

## Post 26 by @lesliebuying — 2016-12-30T19:43:36Z

> [@lesliebuying](#):
>
> My package is also named font-awesome

My package is also named font-awesome

---

## Post 27 by @isabisa — 2017-01-03T18:51:07Z

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

---

## Post 28 by @isabisa — 2017-01-03T19:08:22Z

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";
```

---

## Post 29 by @kalenjohnson — 2017-01-03T20:39:04Z

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

---

## Post 30 by @xav — 2017-01-26T21:57:27Z

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/*"
  ]
}
```

---

## Post 31 by @Lew1s — 2017-05-11T20:19:35Z

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

---

## Post 32 by @ben — 2017-05-11T20:27:54Z

You’re missing the overrides

---

## Post 33 by @Lew1s — 2017-05-12T17:58:42Z

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

---

## Post 34 by @ben — 2017-05-12T18:33:10Z

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

---

## Post 35 by @Calvin_Lyman — 2017-06-03T02:02:51Z

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

---

## Post 36 by @dsemblano — 2017-06-22T09:02:44Z

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

---

## Post 37 by @ben — 2017-06-22T16:27:40Z

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

---

## Post 38 by @skivan — 2018-06-05T14:46:05Z

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.

---

## Post 39 by @mmirus — 2018-06-05T14:54:01Z

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](https://discourse.roots.io/t/how-to-use-font-awesome-5-in-your-sage-theme/11737),

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.

---

## Post 40 by @ben — 2018-06-05T16:08:24Z

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

Please follow this:

> [@mmirus](#):
>
> If you want Font Awesome 5, see this thread: [How to: Use Font Awesome 5 in your Sage theme](https://discourse.roots.io/t/how-to-use-font-awesome-5-in-your-sage-theme/11737),

---

## Post 41 by @ben — 2018-06-05T16:08:57Z