Social Media Buttons not visible

Hello, I hope you can help. I have selected Basic 3 - Inside header and the social media icons are not showing in the header. I can move the mouse to where there should be and the mouse changes and clicking them takes me to the correct website (Facebook, Google+ etc) but they are not visible. I just installed the theme today and added the “Business 2” demo because that is the mods that closest resemble what I’d like. I just can’t seem to have them Font Awesome icons show.

Your help is greatly appreciated.

EDIT: I just noticed that the Social Media Icons are showing up on some pages but not all. On the pages they are not showing up on, as I stated above you can run the mouse over them and click when the mouse changes and they work. They are just not visible.

Hi,

I am sorry to hear that you’ve run into an issu. I am happy to help out.

Seems likely there is CSS code conflict on your website and we could fix it with some additional CSS code. However, we need to inspect it directly first. Can you share a link to your website here?

Regards,
Kharis
aThemes Support

No worries. Please keep in mind we are building a new site at this link while we are using our current site. but it’s in a separate folder so as not to interfere with the active site. https://starshazmat.com/new/starshazmat/

Hi,

Thank you for sharing the link.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

.site-header .socials .fa:before {
  font-family: "FontAwesome";
}

Regards,
Kharis
aThemes Support

Thanks a bunch that totally worked.

One final question…so far I only have the pages included with the Business 2 theme. On the Home, About Us and Contact page the Linkedin Font Awesome icon is one way, and on the Blog page it’s another. Not sure why.

And something just to be aware about…Google+ is no longer active. You may wish to remove it from future iterations of the theme.

HI,

Seems likely Elementor plugin also loads FontAwesome script. Since its version is different, some default theme’s social icons are overridden. To prevent this on the LlinkedIn icon, try adding this CSS code to your website’s Additional CSS.

    .site-header .socials .fa.fa-linkedin::before {
      content: "\f0e1";
    }

Regards,
Kharis
aThemes Support

Yep, that was it. Thank you again for your help!

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support