How to Use Font Awesome with Sage Theme & Bootstrap 4

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.

  • Exact matches only
    Search in title
    Search in content
    Search in posts
    Search in pages
    Filter by Categories
    10
    8.1
    AdWords
    Analytics
    Apple
    Bedrock
    Blade
    Business Development
    Freelancing
    Gaming
    Mac
    Operating Systems
    OS X
    Pay Per Click Management
    Paypal
    PHP
    Press Releases
    Programming
    Razer
    Reviews
    Roots
    Sage Theme
    Search Engine Marketing
    Search Engine Optimization
    Search Marketing
    Tips and Tricks
    Trellis
    Tutorials
    Uncategorized
    Video Production
    Website Development
    Windows
  • Recent Posts

  • Categories

  • Would You Like a Quick Call?

    We're happy to spend 30 minutes answering any of your questions and showing you the first steps to make your business "add up".

    From Our Blog




    Comparison of Code Schools

    Categories: Reviews

    This article is a hyper-focused guide to comparing the code schools out there. School Team Accounts Certification Badges Interactive PHP JS HTML / CSS LESS SASS WordPress Theme Development WordPress Plugin Development WordPress Administration Angular JS MySQL Git jQuery CodeSchool.com                               […]

    Continue Reading »

    Should you put pricing on your website?

    Categories: Business Development

    Recently I was overseeing the development of landing pages for our website. The topic of whether or not we should display our pricing came up and I found that that majority of our team agreed that we should not reveal it. I wasn’t particularly surprised because this is a common tactic, but it’s one I […]

    Continue Reading »

    My First Time with Roots’ Trellis + Bedrock + Sage

    Categories: Bedrock, Roots, Sage Theme, Trellis, Uncategorized

    This article was written to document some of the specific challenges I had that other’s using Roots’ Trellis + Bedrock + Sage may experience as well. My hope is that anyone who gets stuck will be able to save themselves the many hours it cost me to track down these solutions and understand precisely why […]

    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

    us@theportlandcompany.com

    Phone

    503-567-9561

    Follow

  • Logo for The Portland Company with a Coyote