Menu Icons not Working

Support
#1

Hey guys, can someone tell me why the services menu icon is no longer working?

#2

Hi Mike,

Are you adding the icons to the menu items by using their HTML equivalent?

If so, please update data-x-icon to data-x-icon-s. For example:

<i class="x-icon-check-square-o" data-x-icon=""></i> to <i class="x-icon x-icon-check-square" data-x-icon-s="" aria-hidden="true"></i>

Hope this helps.

#3

Ok that did it, thank you! I tried that same logic however for these sub pages icons…and it didn’t work. They are currently blank icons and their current code is:

Consulting

Training

Assessments

Any ideas?

#4

<i class="x-icon-file-text-o" data-x-icon=""></i> Consulting

<i class="x-icon-copy" data-x-icon=""></i> Training

<i class="x-icon-clipboard" data-x-icon=""></i> Assessments

#5

Hey Mike,

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.

Also checkout FAQ section of https://theme.co/apex/forum/t/release-notes-pro-2-2-x-6-2-cornerstone-3-2/38234

I’d suggest you to use the Icons shortcode to avoid any issue, you can replace your HTML markup with the following:

[x_icon type="file-text"] Consulting

[x_icon type="copy"] Training

[x_icon type="clipboard"] Assessments

To see all the icons list, please visit http://demo.theme.co/integrity-1/shortcodes/icons/

Let us know how this goes!

#6

I used the shortcode, but it didn’t work. I’ve been typing this in directly to the navigation label in the menu section. Is that not right?

#7

Hi Mike,

In the navigation label, you need to add the HTML markup, please use this code and make sure to copy and paste the code:

<i class="x-icon x-icon-file-text-o" data-x-icon-o="" aria-hidden="true"></i> Consulting

<i class="x-icon x-icon-copy" data-x-icon-s="" aria-hidden="true"></i> Training

<i class="x-icon x-icon-clipboard" data-x-icon-s="" aria-hidden="true"></i> Assessments

Let us know how this goes!

#8

Got it, thank you!

#9

Glad we could help, Cheers!

#10

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