I’m having the social icon issue on multiple sites that I built a few years ago - so I’m not sure exactly when it happened. I’ve read through the forums and tried to troubleshoot but not able to solve the problem myself. One site is using WP Fastest Cache and the other W3 Total Cache - Caches have been cleared with no resolution and I deactivated both with no resolution. Thanks!
Hello Laura,
Thanks for writing in! This issue usually happens if you have modified the Social Global icons. Please update your code and make sure to use this:
// Social Output
// =============================================================================
if ( ! function_exists( 'x_social_global' ) ) :
function x_social_global() {
$facebook = x_get_option( 'x_social_facebook' );
$twitter = x_get_option( 'x_social_twitter' );
$google_plus = x_get_option( 'x_social_googleplus' );
$linkedin = x_get_option( 'x_social_linkedin' );
$xing = x_get_option( 'x_social_xing' );
$foursquare = x_get_option( 'x_social_foursquare' );
$youtube = x_get_option( 'x_social_youtube' );
$vimeo = x_get_option( 'x_social_vimeo' );
$instagram = x_get_option( 'x_social_instagram' );
$pinterest = x_get_option( 'x_social_pinterest' );
$dribbble = x_get_option( 'x_social_dribbble' );
$flickr = x_get_option( 'x_social_flickr' );
$github = x_get_option( 'x_social_github' );
$behance = x_get_option( 'x_social_behance' );
$tumblr = x_get_option( 'x_social_tumblr' );
$whatsapp = x_get_option( 'x_social_whatsapp' );
$soundcloud = x_get_option( 'x_social_soundcloud' );
$rss = x_get_option( 'x_social_rss' );
$output = '<div class="x-social-global">';
if ( $facebook ) : $output .= '<a href="' . $facebook . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $twitter ) : $output .= '<a href="' . $twitter . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $linkedin ) : $output .= '<a href="' . $linkedin . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $xing ) : $output .= '<a href="' . $xing . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $foursquare ) : $output .= '<a href="' . $foursquare . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $youtube ) : $output .= '<a href="' . $youtube . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $vimeo ) : $output .= '<a href="' . $vimeo . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $instagram ) : $output .= '<a href="' . $instagram . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $pinterest ) : $output .= '<a href="' . $pinterest . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $dribbble ) : $output .= '<a href="' . $dribbble . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $flickr ) : $output .= '<a href="' . $flickr . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $github ) : $output .= '<a href="' . $github . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $behance ) : $output .= '<a href="' . $behance . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $tumblr ) : $output .= '<a href="' . $tumblr . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $whatsapp ) : $output .= '<a href="' . $whatsapp . '" class="whatsapp" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $soundcloud ) : $output .= '<a href="' . $soundcloud . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $rss ) : $output .= '<a href="' . $rss . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon-s="" aria-hidden="true"></i></a>'; endif;
$output .= '</div>';
echo $output;
}
endif;
The issue could also 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.
Please update the file you have added to the functions.php and change data-x-icon to data-x-icon-b.
You can reference the data-x-icon-{a} value or the icon unicode from here: https://fontawesome.com/icons
Hope this helps.
Thank you. I’ve seen this response in other postings. Unfortunately, I have no idea where that code would be and I do not recall modifying the social global icons and there’s nothing in the custom CSS related to that.
Hi @marketinglaura,
The code provided was for social global but I don’t see it activate from your site, sorry for the confusion.
Are you referring to the icons on your footer? It’s a custom code added in the text widget. But I checked the icons isn’t there
<p style="text-align: center;"><strong><a href="http://thepcil.org/">GO TO HOMEPAGE</a></strong> | <a href="http://thepcil.org/site-map/"><strong>FULL SITE MAP</strong></a> | <a href="http://thepcil.org/directory-of-cils/pacils/"><strong>LIST OF ALL PA CILs</strong></a></p>
<p style="text-align: center;"></p>
Please try updating it to this
<p style="text-align: center;"><strong><a href="http://thepcil.org/">GO TO HOMEPAGE</a></strong> | <a href="http://thepcil.org/site-map/"><strong>FULL SITE MAP</strong></a> | <a href="http://thepcil.org/directory-of-cils/pacils/"><strong>LIST OF ALL PA CILs</strong></a></p>
<p style="text-align: center;"><a href="https://www.facebook.com/PCILonline/" role="link" style="font-size: 18px;"><i class="x-icon" data-x-icon-b="" aria-hidden="true" style="font-size:35px;"></i></a></p>
Thanks!
Thanks! That fixed the one site, simple fix, of course I missed it. For http://northwayfamilyhealthcare.com/ the icons are in the topbar and set through X custom in the social section. I’m still not sure where to find social global to change the code referenced…
Hi Laura,
Please double check that under functions.php file locates in your child theme, there isn’t the x_social_global function as @Runel said in the previous reply.
If it doesn’t help, please share us with your admin account so we can take a closer look.
Thank you.
Fixed and I was able to update the email icon as well with this. Thank you!
if ( ! function_exists( ‘x_social_global’ ) ) :
function x_social_global() {
$facebook = x_get_option( 'x_social_facebook' );
$twitter = x_get_option( 'x_social_twitter' );
$google_plus = x_get_option( 'x_social_googleplus' );
$linkedin = x_get_option( 'x_social_linkedin' );
$xing = x_get_option( 'x_social_xing' );
$foursquare = x_get_option( 'x_social_foursquare' );
$youtube = x_get_option( 'x_social_youtube' );
$vimeo = x_get_option( 'x_social_vimeo' );
$instagram = x_get_option( 'x_social_instagram' );
$pinterest = x_get_option( 'x_social_pinterest' );
$dribbble = x_get_option( 'x_social_dribbble' );
$flickr = x_get_option( 'x_social_flickr' );
$github = x_get_option( 'x_social_github' );
$behance = x_get_option( 'x_social_behance' );
$tumblr = x_get_option( 'x_social_tumblr' );
$whatsapp = x_get_option( 'x_social_whatsapp' );
$soundcloud = x_get_option( 'x_social_soundcloud' );
$rss = x_get_option( 'x_social_rss' );
$emailme = '[email protected]';
$output = '<div class="x-social-global">';
if ( $facebook ) : $output .= '<a href="' . $facebook . '" class="facebook" title="Facebook" target="_blank"><i class="x-icon-facebook-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $twitter ) : $output .= '<a href="' . $twitter . '" class="twitter" title="Twitter" target="_blank"><i class="x-icon-twitter-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $google_plus ) : $output .= '<a href="' . $google_plus . '" class="google-plus" title="Google+" target="_blank"><i class="x-icon-google-plus-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $linkedin ) : $output .= '<a href="' . $linkedin . '" class="linkedin" title="LinkedIn" target="_blank"><i class="x-icon-linkedin-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $xing ) : $output .= '<a href="' . $xing . '" class="xing" title="XING" target="_blank"><i class="x-icon-xing-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $foursquare ) : $output .= '<a href="' . $foursquare . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $youtube ) : $output .= '<a href="' . $youtube . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $vimeo ) : $output .= '<a href="' . $vimeo . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $instagram ) : $output .= '<a href="' . $instagram . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $pinterest ) : $output .= '<a href="' . $pinterest . '" class="pinterest" title="Pinterest" target="_blank"><i class="x-icon-pinterest-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $dribbble ) : $output .= '<a href="' . $dribbble . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $flickr ) : $output .= '<a href="' . $flickr . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $github ) : $output .= '<a href="' . $github . '" class="github" title="GitHub" target="_blank"><i class="x-icon-github-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $behance ) : $output .= '<a href="' . $behance . '" class="behance" title="Behance" target="_blank"><i class="x-icon-behance-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $tumblr ) : $output .= '<a href="' . $tumblr . '" class="tumblr" title="Tumblr" target="_blank"><i class="x-icon-tumblr-square" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $whatsapp ) : $output .= '<a href="' . $whatsapp . '" class="whatsapp" title="Whatsapp" target="_blank"><i class="x-icon-whatsapp" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $soundcloud ) : $output .= '<a href="' . $soundcloud . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon-b="" aria-hidden="true"></i></a>'; endif;
if ( $rss ) : $output .= '<a href="' . $rss . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon-s="" aria-hidden="true"></i></a>'; endif;
if ( $emailme ) : $output .= '<a href="mailto:' . $emailme . '" class="email" title="Email" target="_blank"><i class="x-icon-envelope" data-x-icon=""></i></a>'; endif;
$output .= '</div>';
echo $output;
}
endif;
You’re welcome!
We’re really glad that it has worked for you.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.