Add Other Social Media Icons X Theme Pro

[robbo651]

I’m currently using the Pro Version of X Theme, so it gives me the option of custom headers and footers.

I’ve added the social icons element and that adds the Facebook logo, is there anyway to add a Twitter and Instagram logo as well?

Thanks

[mattkutz]

I have been using this code in customizer / custom CSS to replace the behance icon with an ebay icon:

i.x-icon-behance-square {
background: url(“http://chucksas.com/wp-content/uploads/2017/10/ebay.png”);
width: 32px;
height: 32px;
}
.x-icon-behance-square:before{
content: “”;
}

Only problem is there is some weird spacing now in the social icons section because when using content: “” to clean out the old icon, it leaves a small gap. Any better ideas would be great. I also still get a tooltip that says Behance on hover. I tried using javascript to change it, but it did not work, so I just went into the path: wp-content/themes/x/framework/functions/global/social.php and changed the title attribute manually, but I will have to do that on every theme update because I could not find an easy way to do it with the child theme.

[jade]

Hi there,

If you are using Pro, you can simply add a Social element in the header builder then click on Graphic and set the icon in the Primary & Secondary option.

Hope this helps.

@mattkutz thanks for helping out.

[mattkutz]

If not using pro, is there a way to add a custom social icon?
On a site I am building, www.chucksas.com I have replaced the behance icon with an eBay icon, but because I have to use the css content:""; code to clear the old icon out, it changes the spacing and I am left with what you see on the homepage of the above mentioned site. Any suggestions?

[jordanj]

Hello there,

You may insert your social media links in unused social media slots.

For example, if you do not use the Pinterest social media icon, you may insert your eBay link there and change the icon by using CSS.

This CSS would need to be applied in Customize --> Custom --> CSS.

.x-topbar .x-social-global .x-icon-pinterest-square:before {
    content: url(LINK TO THE IMAGE GOES HERE);
}

You would need to ensure the image / icon size is around 15px x 18px to avoid going out of line with the rest of your social media icons.

I hope this helps

[mattkutz]

Thanks for the suggestion, but I am still having spacing issues even after changing the icon size to what you recommended. Also, it only works in the header and not the footer. Which is strange, because the footer uses the .x-social-global class. So I would expect it to work. Site is: www.chucksas.com

EDIT: I just used:

.x-icon-behance-square:before{ content: url(insert url here); }
and it applies to both the header and footer, and when I did so the spacing fixed as well. Strange. Thank you!

[jordanj]

Ah no worries, thank you for keeping us updated!

I am glad to hear you was able to resolve this though

If you require any further assistance at all, please do let us know and we’d be happy to help

[robbo651]

Thanks @Jade worked perfectly

[jade]

You’re most welcome.