Menu Icons Not Displaying After Update

Hi there,

Four of the six menu icons in the sidebar and footer are no longer displaying after I updated Wordpress and X. I can’t even remember where or how I displayed these icons to try and remedy it.

Link: https://photorganised.com/

Can you please help me fix this?
Thanks,
Matt

Hi There,

Thanks for writing in!

You might have added the icons in the menu title.

  1. Please go to appearance -> Menus check each menu item for the icon code.

And the contact menu item icon code should be updated.

From
<i class="x-icon x-icon-comment-o"></i>
to

<i class="x-icon x-icon-comment"></i>

2. Please add this CSS code to your theme option -> CSS.

[data-x-icon-o], [data-x-icon-l], [data-x-icon-s], [data-x-icon-b], [data-x-icon], [data-x-fa-pro-icon], [class*="x-icon-"] {
    font-family: "FontAwesomeRegular";
}

Hope this works.

Hi basanta,

Thank you for that, that’s brilliant. I’ve noticed the social media icons in the footer have disappeared too, can you help me fix those too please?

Thank you, as ever.
Matt

Hey Matt,

Did you modify the social global icon code in your child theme’s functions.php file? Please make sure to update it and see to it that the icons in the code is updated as well. Please refer to this code below:

// 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="&#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-b="&#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-b="&#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-b="&#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-b="&#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-b="&#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-b="&#xf431;" 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="&#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-b="&#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-b="&#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-b="&#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-b="&#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-b="&#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-b="&#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-b="&#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-b="&#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-b="&#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-s="&#xf143;" aria-hidden="true"></i></a>'; endif;

    $output .= '</div>';

    echo $output;

  }
endif;



// =============================================================================

Hope this helps. Please let us know how it goes.

Hi RueNel,

No I didn’t edit them. I copied your code above and pasted it into the child theme’s functions.php file anyhow but it hasn’t fixed it.

Any other ideas?
Thanks for your help,
Matt

Hey Matt,

Sorry for the confusion. Please remove Basanta’s CSS because it’s not the correct solution. We should never override the theme’s FontAwesome CSS. Please see the secure note.

Please instead follow the tutorial in this video: https://youtu.be/6AyXYQH4yBU. There are some more details in this thread: https://theme.co/apex/forum/t/link-with-overlay-and-icon-new-fa-icons-html-code/46053/8

To know why you needed this change, FontAwesome has been updated to version 5 in X 6.2 and it required structural changes. For more details, please see https://theme.co/apex/forum/t/release-notes-pro-2-2-x-6-2-cornerstone-3-2/38234

Thanks.

Hi Christian,

Thank you but it’s only the icons in the footer that have broken. I just want to fix those,

Thanks for your help.
Matt

The icons in the footer was broken because of the custom CSS provided as you can see in the screencast. Please follow the official fix.

We can’t provide more custom CSS as it will create more issues as you have experienced now.

Please also note that it is FontAwesome that changed the system for enhancement purposes. We should follow the recent setup and not tweak the theme using custom CSS.

If you wish to continue with the custom CSS solution, you will need to consult with a third party developer.

Thank you for understanding.

Hi Christian,

Sorry but I’m just not following this solution at all.

The social icons in the footer are automatic, I haven’t written any code to make them appear.

I can’t see anything in that screencast above that mentions the automatic social icons in the footer.

You could please show me how to fix those please?

Thanks,
Matt

Yes, they are automatic or they’re coming from the theme and yes nothing in the tutorial is related to the footer. They weren’t taken into account because they aren’t the problem in the first place.

The custom CSS code given by Basanta broke the footer icons so you should remove first the custom CSS. Please just do this first. Remove the custom CSS given previsouly. That should fix back the footer icons. This wasn’t an issue until the custom CSS given here has been added.

Now after that, we’re back to square one with the broken menu icon. The official fix, as stated in our previous release notes, is you should be updating the HTML you added in your menu as you can see in this video of your site: https://youtu.be/dsVwoNnf2Gs. That is editing through the front-end though because I don’t have access to your site. But, here’s the general tutorial to change or add the actual HTML in the WordPress menu: https://youtu.be/6AyXYQH4yBU.

If it’s still hard to understand, please give us WordPress Admin access in a Secure Note so we could record a screencast or take screenshots of the correct setup specifically in your site.

Thanks.

Hi Christian,

Okay I’m with you now. Thank you for taking the time to make/post that video, really appreciated. Unfortunately, the quality was low so I couldn’t actually see the code, and I’ve tried what I heard, but I couldn’t get it to work. Neither does putting the code in from here work: https://theme.co/apex/forum/t/link-with-overlay-and-icon-new-fa-icons-html-code/46053/8

Could you please give me the code for the home icon, displayed right like in your video, so I can paste it in, and then I’ll amend for the other icons.

Many thanks,
Matt

Hi Matt,

Here is the code for the home icon.

<i class="x-icon x-icon-home" data-x-icon="&#xf015;" aria-hidden="true"></i>

Hope that helps

Hi Paul,

Perfect, thank you so much.

All the best,
Matt

You are most welcome. :slight_smile:

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