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

Navigate to your Sage Theme folder from the command line.
Stop gulp watch if it’s running.
Execute: “bower install –save fontawesome”
Add this to your bower.json file, also within the Sage Theme folder, right after the "dependencies": { ... } section: https://gist.github.com/s3w47m88/0bdb33390cb7d2c6e162fbbf46aa48ae
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.

By:

Spencer Hill

Categorized in: Bedrock, Roots, Sage Theme, Trellis

This post is related to: bedrock, bower, composer, fa, font-awesome, json, sage theme, theme development, trellis, wordpress,

From Our Blog

What is a wireframe in website development or application development?

By Spencer Hill on the 6th September 2021

Categories: Business Development, New Products or Services, Search Engine Optimization, Search Marketing, Website Development, Website Development

In the context of website development or application development a wireframe black and white, deliberately simplified line drawing of the layout of a website or application. This is sometimes mistakenly synonymous with website prototyping. Example How are wireframes used? Wireframing is one step in a professional website design process. It’s a time and […]

What does a professional website development proposal look like?

What does a professional proposal, contract or estimate look like?

By Spencer Hill on the 6th September 2021

Categories: AdWords, Analytics, Business Development, Company News, Content Marketing, Pay Per Click Management, Press Releases, Search Engine Marketing, Search Engine Optimization, Search Marketing, Video Production, Website Development, Website Development

This article outlines what both parties involved in a proposal, contract or estimate for internet marketing should expect and work towards during the negotiation process.

What does professional website development look like?

What does a professional website development process look like?

By Spencer Hill on the 6th September 2021

Categories: Company News, Press Releases, Website Development

If you’re evaluating website development for your business we’ve written this guide to help you know how to define professional website development. Unfortunately, there are many who claim to offer professional services and very few resources to help you confirm and identify the good from the bad. 1. Receive a Professional Proposal This is, without […]

How to Use Font Awesome with Sage Theme & Bootstrap 4

Published on 27th of March 2017

Short Answer