How to Use Font Awesome with Sage Theme & Bootstrap 4

Published on 27th of March 2017

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.



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

dreamweaver using ssh key passphrase is not supported

By Spencer Hill on the 5th February 2020
Categories: 10, IDE's, Programming

  This article documents the key obstacles I faced while trying to set up my local development environment for general Laravel development.   The Context I’m on Windows 10, with Git installed from Git-SCM.com and running the latest version of Adobe’s Dreamweaver. Which means installing Git and utilizing Dreamweavers Git GUI. I had this installed previously […]

Continue Reading »

Seeking Full Time Sales Person

By Spencer Hill on the 7th November 2019
Categories: Careers

We’re growing and seeking an additional full time sales person. The Ideal Candidate: Must be local and able to commute to our Sherwood, Oregon office daily. At least 3 years of business to business sales experience. Excellent computer skills. Extensive familiarity with social media platforms. You use or know how to use Facebook, LinkedIn, Google […]

Continue Reading »

Seeking Part-Time Local PHP Developer

By Spencer Hill on the 18th September 2019
Categories: Careers

We are seeking a part-time local PHP developer to work out of our Sherwood office. Job Description Generally, the work will be scattered and small tasks. Occasionally tasks that may take a few days to a couple of weeks to complete. Communicate over email and phone with clients about their same-day change requests. Enter them […]

Continue Reading »

About

Since 2005 we've been offering digital and content marketing strategy and implementation. Including website development, search engine optimization and marketing, search marketing and more.

Continue Reading »

Contact

Email

[email protected]

Phone

503-567-9561

Follow

    • Logo for The Portland Company with a Coyote