How to correctly install font awesome in sage 9?

I am having some trouble wrapping my head around how to install fonts with sage 9.

I have added font awesome to my package.json like this:

"dependencies": {
    "babel-runtime": "^6.5.0",
    "bootstrap": "^4.0.0-alpha.2",
    "jquery": "^2.1.4",
    "tether": "^1.2.0",
    "font-awesome": ">=4.6.3"
  }

Do I now have to import it into my main.scss?

@import '~font-awesome/scss/font-awesome'

I haven’t messed with Sage 9’s webpack stuff too much, but typically you would pull in all dependencies from your JavaScript.

import 'font-awesome'

or

require('font-awesome');

As it turns out with Font Awesome, however, this won’t work! It’s because the Font Awesome fellas haven’t defined any entry points in their package.json file and they don’t have an index.js file in their repo. You could manually import the SCSS/LESS/whatever as needed, however, but instead I would recommend using font-awesome-webpack.

And in case you’re wondering how it goes from JS to CSS, that’s handled with these two loaders:

https://github.com/roots/sage/blob/sage-9/webpack.config.js#L105-L120

As you can see, we use the extract-text-webpack-plugin to pull the CSS/SCSS out of your JS and dump them into their own files. This is a fairly typical way of doing it these days, so most of your packages will be imported via JS.

Of course, we’re still working on Sage 9 and things might change before it’s finalized. Also, it’s worth noting that we all typically defer to @austin for this stuff, so if he says something that contradicts me, he’s right. lol

1 Like

I’m trying to use Sage 9 with UIKit (instead of Bootstrap). UIKit comes with Font Awesome as part of the package.

My main.scss file looks like this:
$icon-font-path: "~uikit/dist/fonts"; // reset the existing variable to the correct path; not doing so causes npm build to fail due to incorrect path @import "~uikit/dist/scss/uikit.scss";

By settng $icon-font-path, it correctly finds the FA fonts inside of UIKit. However, when it comes to running the build tool, it puts the fonts in:

/dist/_/node_modules/uikit/dist/fonts/

It should go in
/dist/fonts/

How do I make it so it’s cleanly put inside of /dist/fonts/?

I tried using font-awesome-webpack but it just gave me the same results. You might have to wait until the people over at fontawesome add support for webpack or do a pull request yourself :smile:

Also couldn’t help but notice UIKit uses gulp, are you using gulp/bower and sage 9?

in webpack.config.js, change the name property for the fonts to…

name: 'fonts/[name]_[md5:hash:hex:8].[ext]'

You can do the same thing with images, of course, otherwise you’ll run into the same problem with images.

name: 'images/[name]_[md5:hash:hex:8].[ext]'

I’ll be adding this change to sage9 within the next week.

PS-
You can use any hash length you want. I just went with 8 since that’s long enough to avoid collisions.

1 Like

I had a similar problem, you may find this helpful: https://github.com/roots/sage/issues/1659#issuecomment-234613281

2 Likes

I’ve given up on Font Awesome! Just use Icomoon handpicked ones and just load them into assets/fonts and main CSS. or just use the CDN link in head.blade https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

It seems to work fine.