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…

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

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

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

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.