Social media icons broken

[renaissanceman]

Hello,
I’m trying to fix the social media icons on my website.

Thank you

[jade]

Hi @renaissanceman,

I tried to access the site that you have linked but the site seems to be down at the moment (see secure note).

Kindly double check the site so that we can access it.

Thank you.

[renaissanceman]

Ok, its back now

[Prasant]

Hello @renaissanceman,

Thanks for updating the thread.

I checked the website and can see the issues with Social Icon. Please take a look at the solution mentioned in following thread and let us know how it goes:

Social icons broken after update

Thanks.

[renaissanceman]

I’m not sure I understand the solution. This solution helps me set the buttons to solid colors instead of the custom image I need to use for my buttons. I’ve tried replacing the background image for one of them (x-icon-facebook) and it doesn’t look like it’s working.

[nabeel]

Hey @renaissanceman,

To fix the social icons, please add the following code in the Theme Options > CSS:

.x-social-global a i {
    font-family: "FontAwesomeBrands";
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[renaissanceman]

Thank you for the suggestion. It looks much better now. Is there a way to improve this and use our own images instead?

[nabeel]

Hi @renaissanceman,

To add custom images instead of icons, you can make use of the following code instead:

.x-social-global a i:before {
	content: '';
}

.x-social-global i {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

.x-social-global .x-icon-facebook {
	background-image: url(image/link);
}
.x-social-global .x-icon-twitter {
	background-image: url(image/link);
}
.x-social-global .x-icon-instagram {
	background-image: url(image/link);
}
.x-social-global .x-icon-youtube {
	background-image: url(image/link);
}
.x-social-global .x-icon-google-plus {
	background-image: url(image/link);
}
.x-social-global .x-icon-pinterest {
	background-image: url(image/link);
}

In the above code just replace image/link with actual image URL of each social icon. Hope this helps!

[renaissanceman]

Thank you. This works

[rad]

You’re welcome!