Including font awesome

sage
1

I’ve read the following thread over and over and I still don’t understand it: enter link description here

I install font awesome by using: bower install fontawesome --save-dev, and have added the following to bower.js:

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

It doesn’t work. Obviously because there is no scss, or fonts directory. Am I expected to replace those paths with the path to bower_components/font-awesome/sass/font-awesome.sass? Doesn’t seem right to have to do that.

I love sage and all, but it seems like the developers may have overcomplicated something which should be simple. This is a question I’ve seen pop up all over the internet, and usually the accepted response is a link to the thread I included at the top.

It’s literally taken me hours to try get font awesome installed. What is the purpose of bower in 2016 anyway? Can’t it be replaced with npm seen as all the bower packages are also on npm? Or better still move over to webpack :slight_smile: A quote from a engineer at Spotify:

In almost all cases, it’s more appropriate to use Browserify and npm over Bower. It is simply a better packaging solution for front-end apps than Bower is. At Spotify, we use npm to package entire web modules (html, css, js) and it works very well.

I appreciate any help on clearing up my confusion on getting font awesome to work.

2

A mistake we’ve all done – you lack a dash in font-awesome. :wink:

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

Sage 9, which is currently in development has dropped bower and gulp in favour of npm and webpack.

3

Arrrgh! I knew it had to be something simple. Thanks poggen. And I can’t wait for Sage 9.

4

I also should have installed using: bower install fontawesome --save instead of save-dev (I have no idea why I installed like that in the firstplace, I blame sleep).

5

There is another, slightly hacky way to copy all fonts from all bower dependencies without bothering with manual overrides. Add this

    "fonts": {
      "files": ["fonts/**/*", "../bower_components/**/*.{eot,otf,svg,ttc,ttf,woff,woff2}"]
    }

into "dependencies" section of sage/assets/manifest.json

Major downside of this approach is slower build process, especially when there are lots of bower packages (I haven’t tested it yet on a real projects, don’t know how much slower).

Upd.: I would not recommend using this method, because it requires very specific bower packages with .scss / .css entry point and font files being strictly in the fonts directory (but not it’s sub-folders)

6

I just stumbled on this repo today that contains a “shim” version of FontAwesome for people “like us” :slight_smile:

I just typed in the following command and everything was fetched perfectly into the /dist/ folder :thumbsup:

bower install --save components-font-awesome && gulp build

Boom, FA without all the junk and manifest madness.

2 Likes
7

I was also adding font awesome for one of my projects, but found out their service https://fortawesome.com where you add your own icon kit (so you don;t load all the icon library) , add your own icons or logos and load it via CDN, was super easy.

1 Like
8

I ran the command you shared above but Chrome Console is saying it can’t locate the font files themselves. Should the above command include them automatically? Or do I need to manually add them somehow?

9

@s3w47m88 TBH I can’t quite recall, I’m on Sage 9 now which uses different build tools. Have a go and see if it works, if not you may need to add manual refs in somewhere.

10

Is this still applicable for sage 8.5.4?

I tried it but I’m getting console error of "404 Not Found - /theme/dist/webfonts/fa-solid-900.ttf "