Docs

[WPH2o]

Hello,

Icons always work in buttons.

Icons always work when I embed the shortcode in a link e.g.

<a href="#example" target="_blank">[x_icon type="external-link-square"] Link Name</a>

Icons NEVER work in Icon lists, or custom menus.

I NEED them to work in custom menus.
This is such a simple thing but it never works.

I try adding things like:

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

…before a menu item name in the Navigation Label field, and icons never appear in custom menus.

I’ve reviewed and tried the things in these posts and it NEVER works–icons never appear.

https:// community.theme.co/forums/topic/adding-icon-in-top-menu/
https:// community.theme.co/forums/topic/adding-icons-to-the-menu/
https:// community.theme.co/forums/topic/how-to-create-menu-icons/
https:// community.theme.co/forums/topic/icon-in-menu-2/
https:// community.theme.co/forums/topic/navigation-menu-icons-2/
https:// community.theme.co/forums/topic/add-icons-before-custom-menu-text/

This also fails to display icons:

`

[icon_list]
[icon_list_item type=”ticket”][extra href=”#example” title=”title” info_content=”info” info=”popover” info_place=”top” info_trigger=”hover”]LinkName[/extra][/icon_list_item]
[icon_list_item type=”calendar”][extra href=”#example” title=”title” info_content=”info” info=”popover” info_place=”top” info_trigger=”hover”]LinkName[/extra][/icon_list_item]
[icon_list_item type=”info-circle”][extra href=”#example” title=”title” info_content=”info” info=”popover” info_place=”top” info_trigger=”hover”]LinkName[/extra][/icon_list_item]
[icon_list_item type=”map-marker”][extra href=”#example” title=”title” info_content=”info” info=”popover” info_place=”top” info_trigger=”hover”]LinkName[/extra][/icon_list_item]
[/icon_list]

Please help me do this.

Chris

[Thai]

Hi Chris,

Please take a look at this ticket: https://community.theme.co/forums/topic/add-icon-to-menu-item/#post-1034229.

Hope it helps 🙂

[WPH2o]

This fails also.

[Jade]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[WPH2o]

This reply has been marked as private.

[Christopher]

Hi there,

According to our changelog on x V4.0.0 :

Instead of using CSS classes for each icon (e.g. .x-icon-home), we’re now using inline data attributes to determine the output of each icon. Ultimately, this resulted in a stunning 20% reduction in stylesheet size, making things much cleaner. If you’re simply using the [icon] shortcode throughout your content, all of these changes will be implemented automatically behind the scenes.

Updating the markup of these icons is fairly simply. For example, let’s say that you have an icon in your navigation that is outputting the home graphic. This might look something like the following based on previous versions of the shortcode’s output:

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

Moving forward, the first thing you would need to do is find the unicode representation of this icon. To do that, you can simply go to Font Awesome’s icon list and find the icon you want and click on it. For this example, we’re looking for the home icon, which will ultimately take you to this page. Below the icon examples we see the unicode value for this icon is f015. We can now take this value and update the markup like so:

<i class="x-icon-home" data-x-icon=""></i>

Please check this link :

https://theme.co/changelog/#theme-4-0-0

Hope it helps.

[Author]

Posts