Custom Social Icons - Placeholder, but Icon Not Found

[Gobaga]

I am adding “custom social icons” to a website following the instructions provided in this Apex Forum Post

Bandcamp, Snapchat and other social icons

I’ve added the custom code to X Child functions.php file. The examples provided in that post work fine, meaning I can create the icons for Etsy, Bandcamp and Soundcloud.

I am trying to add an icon for Patreon. I have added the following code to the function outlined in the previous post:

// Please insert your social profile links
$patreon  	 = ' <website URL> ';

// custom social profile links
if ( $patreon )		   : $output .= '<a href="' . $patreon         . '" class="patreon" title="Patreon" target="_blank"><i class="x-icon-patreon" data-x-icon="&#xf3d9;" aria-hidden="true"></i></a>'; endif;

NOTE: I’m not quoting all of the code inserted in functions.php, only the relevant components.

From the Font Awesome Cheat Sheet https://fontawesome.com/cheatsheet the code for Patreon is f3d9, and is labeled ‘patreon’.

However, when I implement this on my website, the link for Patreon is placeheld, but the icon image is not present. Here is an example, showing Instagram | Patreon | Bandcamp. The Bandcamp icon is placed using the example code in the Apex Forum post I referenced.

Why is the Patreon icon not showing? Is X Theme using a deprecated set of fonts or image icons? Or is there another configuration setting that I need to change?

Thank you.

[jade]

Hi there,

The version of FontAwesome that is supported by X is 4.7.0 while the Patreon Icon was introduced in FontAwesome 5 that is why it is not showing up.

You option would be to use an image icon instead and upload it in the Wordpress media section then update the code to:

if ( $patreon )		   : $output .= '<a href="' . $patreon         . '" class="patreon" title="Patreon" target="_blank"><img src="LINK_TO_THE_IMAGE_FILE"></a>'; endif;

Hope this helps.

[Gobaga]

Hi @Jade,

Thank you for your response.

Yes, the code you provided does work, and I’m now able to display a Patreon logo along the other Social Icons. However, it’s not great – the Patreon logo is not centered with the others, and does not change color with hover-over.

It’s close, but not quite there.

What is the timeline for X Theme to move to version 5 of FontAwesome?

[nico]

Hi @Gobaga,

Would you mind sharing us the URL of your site so we could check your setup further.

And in regards to the FontAwesome version 5, I could not guarantee when will be the update but I could guarantee you that we are working on the updates already.

Thank you so much for understanding.

[Gobaga]

Hi @nico,

Below is a URL for the website of concern. Thank you for taking a look at it.

[nico]

Hi @Gobaga,

The logo of the patron has a different size with the icons that is why it is not centered. You could add margin-bottom to the image so that it will be centered or adjust the image size.

Check the link below on how I added a margin bottom to make the logo center.

Hope it helps.

Let us know how it goes.

Thanks.

[Gobaga]

That worked. Thank you.

[nico]

Hi @Gobaga,

Happy to hear that.

Feel free to ask us again.

Thanks.