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
    Content Marketing
    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




    Curious about content marketing? Here’s the who, what, where, when, and why.

    Categories: Content Marketing, Pay Per Click Management, Programming, Search Engine Marketing, Search Engine Optimization, Search Marketing, Video Production, Website Development

    What is content marketing? While the phrase “content marketing” is new and trending, the practice is not. Content marketing is the process of using your resources to create and promote original content that is attractive to an audience. Effective content marketing will generate a return on investment directly and / or indirectly. Overall, you can […]

    Continue Reading »

    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 »

    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