Adding fontawesome using bower if you are using a Sage starter theme

Using fontawesome is a lightweight way to add some icons to your theme so most of the times I am using this instead of using images for common icons

  1. Run the commands below:

//run this to download the latest fontawesome via bower
bower install –save fontawesome
//this will make sure that you have all necessary dependencies
npm install grunt-contrib-copy –save-dev
// after running the commands above, you will have this entry in your bower.json file
// "dependencies": {
// "bootstrap-sass": "3.3.6",
// "font-awesome": "fontawesome#^4.6.3"
// },

2) bower_components folder will now have the font-awesome directory, I manually copied all 6 font files from the bower_components/font-awesome/fonts folder


  • FontAwesome.otf
  • fontawesome-webfont.eot
  • fontawesome-webfont.svg
  • fontawesome-webfont.ttf
  • fontawesome-webfont.woff
  • fontawesome-webfont.woff2

to assets/fonts folder

3) run gulp build and you should have your dist/fonts all the fonts that you have and it should work as expected


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.