Footer Icons Disappeared

[freedomdesign]

Hi there,

Since updating our site recently, all the footer social icons have turned into empty boxes.

I’ve followed all the steps here:

Release Notes - Pro 2.2, X 6.2, Cornerstone 3.2

But can’t get them back.

Help!!!

eg

Evergreen Outdoor Center | Guiding & Instruction in Hakuba Japan

[jade]

Hi there,

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.

So kindly edit the code you have added in the functions.php file and update data-x-icon to data-x-icon-b.

Hope this helps.

[freedomdesign]

Hi,

I looked into this, and the fix works for Facebook Icon but not for Youtube.

The code I have is

    $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=""></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=""></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=""></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=""></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=""></i></a>'; endif;
  if ( $foursquare )  : $output .= '<a href="' . $foursquare  . '" class="foursquare" title="Foursquare" target="_blank"><i class="x-icon-foursquare" data-x-icon-b=""></i></a>'; endif;
  if ( $youtube )     : $output .= '<a href="' . $youtube     . '" class="youtube" title="YouTube" target="_blank"><i class="x-icon-youtube-square" data-x-icon=""></i></a>'; endif;
  if ( $vimeo )       : $output .= '<a href="' . $vimeo       . '" class="vimeo" title="Vimeo" target="_blank"><i class="x-icon-vimeo-square" data-x-icon=""></i></a>'; endif;
  if ( $instagram )   : $output .= '<a href="' . $instagram   . '" class="instagram" title="Instagram" target="_blank"><i class="x-icon-instagram" data-x-icon-b=""></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=""></i></a>'; endif;
  if ( $dribbble )    : $output .= '<a href="' . $dribbble    . '" class="dribbble" title="Dribbble" target="_blank"><i class="x-icon-dribbble" data-x-icon-b=""></i></a>'; endif;
  if ( $flickr )      : $output .= '<a href="' . $flickr      . '" class="flickr" title="Flickr" target="_blank"><i class="x-icon-flickr" data-x-icon-b=""></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=""></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=""></i></a>'; endif;
  if ( $whatsapp )    : $output .= '<a href="' . $whatsapp    . '" class="tumblr" title="Whatsapp" target="_blank"><i class="x-icon-email" data-x-icon-b=""></i></a>'; endif;
  if ( $soundcloud )  : $output .= '<a href="' . $soundcloud  . '" class="soundcloud" title="SoundCloud" target="_blank"><i class="x-icon-soundcloud" data-x-icon-b=""></i></a>'; endif;
  if ( $rss )         : $output .= '<a href="' . $rss         . '" class="rss" title="RSS" target="_blank"><i class="x-icon-rss-square" data-x-icon-b=""></i></a>'; endif;
  if ( $tripadvisory )     : $output .= '<a href="' . $tripadvisory . '" class="tripadvisor" title="Tripadvisor"><i class="x-icon-tripadvisor" data-x-icon=""></i></a>'; endif;

$output .= '</div>';

echo $output;

  }
endif;

And the display:

Please help get this right!

Thanks in advance

[mldarshana]

Hi There @freedomdesign

In your above code, locate the following line
<i class="x-icon-youtube-square" data-x-icon=""></i>
Change data-x-icon to data-x-icon and add the following unicode inside “”.


Hope that helps.

[freedomdesign]

Update:

I just removed the custom code, the Tripadvisor Icon looked terrible anyway. Thanks though!

I tried this, but I think the directions aren’t clear.

When you say “Change data-x-icon to data-x-icon” what does that mean?

Thanks in advance!

[rad]

Hi @freedomdesign,

Sorry, there was a typo error. It should be change data-x-icon to data-x-icon-b or data-x-icon-s. The new font icons implementation has solid icon and brand icons.

Thanks!