Add Font Awesome social icons to your Beaver Builder menus

Take a look at the top header bar on Beaver Brains and you’ll notice some colourful social icon links for our Facebook, Twitter and Instagram networks. Thanks to David Waumsley’s article here, we were able to add these icons using Font Awesome and the standard WordPress menus.

If you are using the Beaver Builder theme, you can add social icons to your header and footer by setting your social networks and the header options in the theme customiser. But what you get is a pretty standard affair…

beaver builder font awesome social icons 01

The default Beaver Builder social icons selected in the WordPress Customiser displayed in the header top bar

beaver builder font awesome social icons 02

Head to the WordPress customiser if you want to use the default social icons in the header top bar

beaver builder font awesome social icons 03

By adding a bit of code to the WordPress menu, you can craft your own colourful icons

beaver builder font awesome social icons 04

The final result with font awesome icons showing up in the top bar

By utilising the Font Awesome library that comes with the Beaver Builder theme, plus a little CSS styling, you can achieve a much better result and the same code can be used just about anywhere you’d like your icons to appear.

Because the Beaver Builder theme loads the font awesome library automatically, you can use the icons anywhere you like. – hence this: Facebook this: Twitter and this: Instagram

Just don’t swap out to a non-font awesome theme later on!

Error!

To get Font Awesome icons into your menus, follow David’s article over on his blog and be sure to visit his YouTube channel where you’ll find plenty more useful Beaver Builder tips.

Posted in

Michael Davis

Chief brainstormer at I'm Not Marvin, a development agency specializing in WordPress Applications. I've been in web development in one form or another since the late 90's. If I can't be reached I'm probably hitting the trail on my mountain bike.
  1. jj on October 20, 2016 at 6:55 pm

    Hi Ian –
    I’m looking to add the icons in the menu bar for the navigation pages not the social media icons.
    Like the house icon next to HOME or the heart icon next to CONTACT
    Can you help? Thanks, jj

Leave a Comment