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.




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,

  • Generic selectors
    Exact matches only
    Search in title
    Search in content
    Search in posts
    Search in pages
    Filter by Categories
    10
    2D Vector Design
    8.1
    Adobe
    AdWords
    Analytics
    Apple
    Apps
    Bash / Shell
    Bedrock
    Blade
    Business Development
    ChromeOS
    Company News
    Content Marketing
    Digital Design
    Digital Marketing
    Freelancing
    Gaming
    Google
    Google Hangouts
    Illustrator
    Linux
    Mac
    New Products or Services
    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
    Web Hosting
    Website Development
    Website Development
    Windows
    WordPress
  • Recent Posts

  • Categories

  • 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
    Thank you for using our site. x