Social icons in header

BB Theme
1

This may have been asked before…but is there an easy way to insert social icons into the header? I tried to use a shortcode and when I inserted it in the html box for the header it displayed the text and not the icon.

I assumed there had to be a quick and easy way for people to add them.

I really wanted to create a way for my users to easily add the icons…I could custom code it and just provide them that code for now, but I was just wondering if there was in fact an easier way.

Thanks!

2

Hello Grant,

In fact, you can add social icons to the right corner of the header. If you go the Theme Customizer(Appearance -> Customize) then go to Header -> Header Layout and just under Header Content Layout, you can see there is an option for Social Icons. To set which social icons to display, you can go to Settings -> Social Icons and place the links there. Take note this is all done under the Theme Customizer. We also have more information of that here.

Hope this helps!

Ben

3

Ben,

Perfect - yes that worked! I didn’t find the social settings in the “Settings” section at first.

Thanks for the assistance.

4

Anytime, Grant! I’ll be marking this as resolved now.

Have fun using Beaver Builder products!

Ben

5

Hi Ben

Is it possible that this changed?
I can’t find it unter that section.

Thank you

6

Hi Fermo,

For Social Icons in the Header, you need to be using the Nav Bottom layout option in Customising > Header > Header Layout. Once that is selected, you will be able to see a new Content option. Here you can None, Text, Social icons and Text with Social icons.

Once you have selected this option, you then go to Customising > Settings > Social Links and add the URL’s for your social networks.

Thanks,
Danny

7

But this new content option only shows if I choose Nav bottom which leads to a new (header)row which contains the menu. i would like to have the menu and social icons on one row.

Thank you!

8

Hi Fermo,

Unfortunately, there is no option to include both the menu and social icons via the Customizer, unless you select the Nav Bottom option.

However, what you can do is navigate to your WordPress Admin Dashboard > Appearance > Menus and select the menu that is being used in your header.

From here, click on the Custom Links module and in the URL field, add the link to your social network i.e. your Facebook page and in the Link Text add <i class="fa fa-facebook"></i>.

Repeat this process for all you social networks such as:

Twitter = <i class="fa fa-twitter"></i>
Google+ = <i class="fa fa-google-plus"></i>

For a full list of Font Awesome social icons, see the Font Awesome website.

When you have completed adding your menu items for each social network. Save the menu and when you visit your sites front-end. You should have something like this:

Cloudup

Thanks,
Danny

9

Thank you that worked!