Ethos.css | Social Icons not visible anymore?

NGD · June 1, 2018, 4:52pm

Dear X Team,

I did update to the latest version of X (6.1.2) and my social icons from the topbar disappeared.
I tired to find the issue and in the dev tools i could find that the ethos.css was loaded with this setting:

[data-x-icon]:before,[class*="x-icon-"]:before{
content:attr(data-x-icon);
line-height:1
}

I removed the line content:attr(data-x-icon); and the icons are back.
Maybe you can help me out. I dont want to change this in the main ethos.css file in the x theme. But everything else did not work.

Thanks and BR
Max

mldarshana · June 1, 2018, 8:30pm

Hi Max,

Thanks for writing in! I see that you have plenty of licenses, so I cannot determine the site that you’re referring to. Usually after an update, you need to perform the following steps to avoid possible conflicts.

Head over to X -> Settings and hit the Clear Style Caching button.
If you’re using a caching plugin on your server, you need to purge server cache and also it’s better to disable CSS/Javascript minifications from the caching settings.
If you’re using a service like CloudFlare, you also need to clear it’s cache by login into their account.
You also need to clear browser cache before testing the site.

Let us know how it goes.
Thanks!

NGD · June 2, 2018, 11:25am

Hello,

thanks for your reply. I did use the “Clear Style” and deleted all caches from autoptimize, wp super cache and cloudflare.
Unfortunately there is still no images for the social icons. Please have a look here: https://www.noizefield.com/
(top right)

Thanks
Max

thai · June 2, 2018, 12:50pm

Hello There,

Please follow up the steps below:

Ensure everything is up to date according to our version compatibility list here. Please follow the best practices when updating your theme and plugins. Click here for more information.
If you’re using a CDN(ex: CloudFlare), please clear the CDN’s cache and disable optimization services. For the CloudFlare you also need to follow the steps below besides the developer mode:
https://xthemetips.com/using-cloudflare-rocket-loader-with-x-pro-and-x5/928/1
Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If you still have problems kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

NGD · June 2, 2018, 8:15pm

Hi and thanks for your help.

All versions should match and I did follow all instructions. There is still the problem with the social icons. As soon as I remove this: content:attr(data-x-icon); from the ethos.css file it looks fine.

I will provide you with an admin user…

Thanks
Max

ruenel · June 3, 2018, 1:09am

Hello There,

The issue is because you have an outdated x_social_global function. You need to update it and use this instead:

// 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="&#xf082;" 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="&#xf081;" 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="&#xf0d4;" 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="&#xf08c;" 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="&#xf169;" 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="&#xf180;" 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="&#xf166;" 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="&#xf194;" 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="&#xf16d;" 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="&#xf0d3;" 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="&#xf17d;" 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="&#xf16e;" 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="&#xf092;" 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="&#xf1b5;" 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="&#xf174;" 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="&#xf232;" 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="&#xf1be;" 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="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;

If you are not making any changes to the function, I would highly recommend that you remove the block of code instead.

Hope this helps. Kindly let us know.

NGD · June 3, 2018, 8:22pm

Thanks very much!

Its working.

BR
Max

ruenel · June 3, 2018, 8:34pm

You’re welcome Max!
We really apprecciate for letting us know that it has worked for you.

system · June 13, 2018, 8:34pm

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