Just faced the following issue. The problem is when I paste the font-awesome code in my navigation menu point I see the text <i class="fa fa-shopping-cart" aria-hidden="true"></i> (screenshot attached) instead of icon.

And I am faced with such a problem for the first time - I never faced this issue on all my previous websites. FontAwesome is successfully integrated - I can see all icons inside my website content.

I tried to:

• deactivated my custom theme and activated WP default themes
• deactivated all my plugins
• cleaned cache etc
• checked my .htaccess file

But unfortunately nothing helped.

Just faced the following issue. The problem is when I paste the font-awesome code in my navigation menu point I see the text <i class="fa fa-shopping-cart" aria-hidden="true"></i> (screenshot attached) instead of icon.

And I am faced with such a problem for the first time - I never faced this issue on all my previous websites. FontAwesome is successfully integrated - I can see all icons inside my website content.

I tried to:

• deactivated my custom theme and activated WP default themes
• deactivated all my plugins
• cleaned cache etc
• checked my .htaccess file

But unfortunately nothing helped.

• navigation
• twitter-bootstrap

Share Improve this question asked Jan 8, 2020 at 14:10 MorgariMorgari 11344 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

WP nav menus don't allow you to paste in HTML directly.

Option 1

Instead, you could create a "Cart" menu item, and use CSS to move the text off the visible page (so screen readers still read it, but sighted visitors don't see it) and add the icon with an :after. (You can add a custom CSS class to the menu item in wp-admin, and use that to identify which link gets the :after and the text moved.)

Option 2

Or, you could use a custom nav walker, which could check if the current menu item links to the cart, and if so, adds the HTML markup you were originally trying to add.

Option 3

You could use wp_get_nav_menu_items() (see the Code Reference) to get the items, then use your own custom function to add the HTML markup you were originally trying to add. This might be simpler than the custom walker.