Increase size of social media icons

BB Theme
1

Hi Guys

Is it possible to increase the size of the social media icons in the header?

Thanks

Kay

2

Hey Kay,

You should be able to using this CSS snippet.

.fl-page-header .fl-social-icons .fl-icon {
  font-size: 24px;
  width: 24px; /*Only adjust when you need more space between the icons*/
}

Ben

3

Hi Ben,

I have the same challenge. Can you tell me where I would put this CSS snippet?

Thanks!
Rob

4

Hey Rob,

You should be able to place this, and all CSS codes moving forward, under Theme Customizer > Code > CSS Code.

Hope this helps! :slight_smile:

Ben

5

Hi Ben,

Thanks for the reply! I placed the code there, but it doesn’t seem to have any impact on the size of the social media icons on the home page. I even increased it to 40, just to make sure, but no effect. Here is the code that I placed under Appearance > Customize > Code > CSS Code.

.fl-page-header .fl-social-icons .fl-icon {
font-size: 40px;
width: 24px; /Only adjust when you need more space between the icons/
}

Thoughts? Thanks again for the help.

best,
Rob

6

Hey Rob,

Do you mind sharing the URL of the site you are working on so I can take a look?

Ben

7

Hi Ben!

I actually figured it out. I realized that my icons are not in the header, they are in the Top Bar. Since the code above was written for the header, it had no effect. When I changed the CSS to .fl-page-bar, then it worked! :slight_smile:

Thanks again.

Best,
Rob

8

Hey Rob,

That’s great! We actually have a KB article for that. Check the link below. Although it doesn’t have the top bar section. I’ll have to add it. Thanks for the heads up and enjoy BB! :slight_smile:
http://forum.wpbeaverbuilder.com/knowledge-base/adjust-size-of-social-icons/

Ben