Assigning Icons to Menu Links - X

Hey Guys!

I’ve been reading through the couple most recent posts from others users about how to assign an icon/emoji to menu links in X and have been finding a variety of different answers and solutions but none of them really seem to do exactly what I have in mind.

I’m trying to get a ShoppingCart icon to display just before the text “Cart” in my menu and forward to a corresponding page.

I tried following this: How to Create Menu Icons but it no longer appears to work, replaced home with shopping-cart after looking at this: Renew Icon Pack - X

This thread (Add Icons to Menu) talks about using Unicodes, however I’m just trying to reference the X-icon included shopping cart icon and not using the unicode version.

I’ve also noticed the “Icon Primary”, “Icon Secondary”, and “Graphic Display” section when editing menu items in Wordpress; could these be used or are they for something else? https://imgur.com/a/c1I6cHI

Any help and clarification on this would be greatly appreciated!

Thanks!
Clovis

Hey Clovis,

The Font Awesome structure has been updated and the old structure no longer works. Here’s the new structure <i class="x-icon" data-x-icon="&#xf3cd" aria-hidden="true"></i>. Change f3cd with unicode of the icon you’d like to use. You can use the free icons in Font Awesome. See https://youtu.be/4AidFXxxQWE

Hope that helps.

1 Like

Hey there!

I tried doing that and here’s what I’m getting:

Thank you,
Clovis

Hi Clovis,

Sorry for the typo, please update that to this:

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

You need to determine what group your icon belongs, because as of Font Awesome version 5 they split icons into multiple fonts group. This can be fixed by changing instances of the data-x-icon attribute to one of the following:

  • data-x-icon-b for brand/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.

Release Notes - Pro 2.2, X 6.2, Cornerstone 3.2

Cheers!

1 Like

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