Social Icons problem

Support
#1

I recently updated X theme. When the update was complete all of the social icons dissapeared. I can still click them but cannot see the Facebook, twitter etc. icons in the footer or header. How can I fix this? My website is: https://www.bethanyplace.com/
Thanks!

#2

Just replying to say that I’m having this issue too with an in-development site I’m using. I tried updating my .htaccess file (both root and site-specific) and it doesn’t appear to have helped.

My in-development site: http://web-creations.ca/juli-choden/

#3

Hi There,

Thanks for writing in!

We are really . sorry that you faces such issue. There was a issue in recent update for font awesome as we have replaced the old font awesome icons to new version.
There is fixed version of the theme available for update, if you have update already and using latest version please clear your plugins cache if you are using any cache plugins, also please clear server cache if you have.

Hope this helps!

#4

That did not help. I did find the following about the social icons showing up as squares:

“I’ve cleared my cache but it’s still happening. What do I do next? This could happen if your site has icon markup that you added directly rather than using our icon shortcode. As of Font Awesome version 5 they split icons into multiple fonts. This can be fixed by changing instances of the data-x-icon attribute to one of the following:
data-x-icon-b for social icons.
data-x-icon-o for outline icons.
data-x-icon-s for solid icons.
The original attribute data-x-icon will still work for solid icons as a fallback but we’ve updated everything for consistency.”

The data-x- con-b worked for all of my social icons except the mail. I have the following code for the mail:

// For Mail
$output .= ‘’;

  $output .= '<a href="https://www.bethanyplace.com/contact-us/" class="mail" title="Email"><i class="x-icon x-icon-envelope-o" data-x-icon="" aria-hidden="true"></i></a>';

What do I need to do to get the icon to work again?

#5

Sorry to butt in :wink:

I had the very same problem with social icons not showing in the footer menu. I viewed a couple of threads in the forum…each requiring a change to the function.php.
Here’s one of the threads: https://theme.co/apex/forum/t/social-icons-custom-in-footer-have-gone-after-update/

I am far from a developer and wanted to find away round without having to change the php file.
By using the code in the thread I was able to update the icons and the social icons are now showing in the footer menu.

Here’s an example for LinkedIn:

Hope this helps?

#6

@tech13

You can try this code instead

<a href="https://www.bethanyplace.com/contact-us/" class="mail" title="Email"><i class="x-icon-envelope" data-x-icon-s="&#xf0e0;" aria-hidden="true"></i></a>

@managet0p_xtheme

Thanks for helping out.

#7

I’m having the same problem… and have added the code to the functions.php to no avail.

@tech13, where does one put that code?

#8

I tried that and it just completely remoed the square but still did not get the icon to work.

@kelleychambers you would put it in the functions.php but it does not seem to work

#9

@tech13,

I tried that code in my test and it seems to work.

Please clear plugin cache or if you have CDN please clear CDN cache as well.

If it still not working, please provide us your wordpress admin login in Secure Note

Thanks

#10

I was looking to put it next to the social icons by putting it in the functions.php file. I figured out another way to do it. Thanks!

#11

You’re welcome.

#12

Correct. I can confirm it does not work. Why hasn’t Theme.co made an update that UPDATES FontAwesome automatically? Clearly, EVERYONE is having a big problem with it.

#13

That’s just a temp fix for only the footer… a lot of us have problem with BOTH the header and footer. Can we please get REAL resolution!!!

#14

Hi @kelleychambers,

Thank you for reaching out to us. We updated FontAwesome with this release. Version 5 required changes to the markup, CSS, and the file location changed. Your site is probably serving the old markup which has references to the previous font location.

If you’ve cleared your cache and you’re still seeing this problem it could be because the icons have been customized with a child theme. If that’s the case you’ll need to replace data-x-icon with data-x-icon-b to make your social icons load again.

Take a look at this thread for an example: https://theme.co/apex/forum/t/social-icons-custom-in-footer-have-gone-after-update/38535/53

If nothing works then please do the following:

  1. Ensure everything is up to date according to our version compatibility list at https://theme.co/apex/forum/t/troubleshooting-version-compatibility/195. Please follow the best practices when updating your theme and plugins. See https://theme.co/apex/forum/t/setup-updating-your-themes-and-plugins/62 for more details.

  2. Clear all caches including browser cache then deactivate your caching plugins and other optimization plugins.

  3. If you’re using a CDN, please clear the CDN’s cache and disable optimization services.

  4. Remove custom CSS, JavaScript and deactivate your child theme and switch to parent theme (take a complete backup first).

Let us know how this goes!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.