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…
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!
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.
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
Hey JJ – David Waumsley has an excellent article on adding Font Awesome icons to your menus. It’s focused on adding social icons but you can use the same technique, maintaining the text in your menu and adding the appropriate icon as you need – see the full article here: https://davidwaumsley.com/icons-to-beaver-builder-theme-menus/
Alternatively, you can use the very excellent Font Awesome 4 menus plugin and follow the advice here on setting it all up.
Font Awesome 4: https://en-gb.wordpress.org/plugins/font-awesome-4-menus/