I am developing a clients website with Trellis + Bedrock + Sage and Bootstrap 4. Bootstrap 4 no longer includes Font Awesome library by default so I had to learn how to include it in Sage by reading this forum thread on the Roots website.

Short Answer

1. Navigate to your Sage Theme folder from the command line.
2. Stop gulp watch if it’s running.
3. Execute: “bower install –save fontawesome”
4. Add this to your bower.json file, also within the Sage Theme folder, right after the "dependencies": { ... } section: https://gist.github.com/s3w47m88/0bdb33390cb7d2c6e162fbbf46aa48ae
5. From the command line execute gulp && gulp watch.

That should do it! If it doesn’t for you, please post in the comments below.

Long Answer

In WordPress you have Plugins and Themes. Packages you install to build your website or application. Your project is dependant upon these.

But managing them – like ensuring your clients can’t break things by updating them, or trying to start a new project and having to manually re-add all of them through WordPress’ GUI is not efficient.

Meet Composer & Bower. They are dependency managers that allow you to install Plugins from the command line as well as specifying them in a config file for all future projects so you don’t have to repeat that every time you start a new one. I’ve heard you can even configure some Plugins automatically as well – but I’ve yet to explore this myself.

But the Bedrock & Sage Theme documentation on how to add new packages – specifically WordPress Plugins that aren’t in the WordPress Plugin Directory – is lacking. So I had to take to their forums to figure it out.

Why not install a Font Awesome Plugin?

I didn’t try it. Maybe that would work too.

Why didn’t you try it?

I don’t know. Maybe because I think there would be compatibility problems with Gulp / Sage and a Plugin. Maybe because when I looked up the proper way to include font awesome in Sage Theme they recommend my approach above.

Categories: Bedrock, Roots, Sage Theme, Trellis