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.

Categories: Bedrock, Roots, Sage Theme, Trellis
  • Generic selectors
    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
    Company News
    Content Marketing
    Freelancing
    Gaming
    Linux
    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
    Ubuntu
    Uncategorized
    Video Production
    Website Development
    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




    Img

    Roots Issue #12: Code, styles, not updating

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

    The Issue Recently, I discovered that when I saved my code it was no longer appearing when I reloaded the website while working locally in development. This occurred along with this error so I thought they were connected.   The Solution It turned out that when you run gulp --production that the Theme begins to look in […]

    Continue Reading »

    Img

    Roots Issue #11

    Categories: Roots, Trellis, Ubuntu

    [Browsersync] Couldn’t open browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false) I have built several sites with Roots stack now and suddenly, BrowserSync is no longer working on one of them. However, BrowserySync is working on all the others. So this suggests to […]

    Continue Reading »

    Img

    Roots Issue #10

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

    Today I switched from my Mac to my Linux Ubuntu and attempted to continue working on a Roots site. After cloning it down and using vagrant up to start the server and the site. Then I noticed the sites styling was broken. So I looked at the main.css stylesheet and discovered it was not found. So […]

    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