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.
"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.
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.
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
@kalenjohnson that solution also fixed it for me, except I also had to add a hyphen (font-awesome)
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
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.
Once files spec lands into bower that too won’t be issue 
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.
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.
Same for me! So:
"font-awesome": {
"main": [
"./scss/font-awesome.scss",
"./fonts/*"
]
},
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?
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
How to declare assets is still somewhat up in the air
Hmm… Interesting. Thanks.
Does this mean we’ll need to add overrides for most dependencies like this?
Actually for packages without requiring images or fonts, it should be easier and not require manual overrides
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).
Thanks
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
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!
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?
Trying to include font-awesome the way you did. The following error is still showing.
Do you see what I am doing wrong?
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/*"
]
}
}
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/*"
]
}
}
}
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?