Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to follow Jason Bradley's advice on how to style my Wordpress menus.

Specifically, I want to insert an icon before my navigation items using Font-Awesome.

I tried putting this code in the Navigation Label field for my "Home" link:

<i class="icon-fixed-width icon-home"></i> Home

However, when I view the page in my browser, it displays the HTML verbatim, it doesn't interpret the tag, or any other HTML I throw at it, for that matter.

Did Wordpress Menus change in 3.6? Am I missing something obvious?

I know that my font-awesome installation works because I am using their icons all over my site. Thanks.

share|improve this question

1 Answer 1

up vote 2 down vote accepted

The "Navigation" field is not where you want to place your CSS class. The navigation is what the user will see in the menu, so don't put any code there.

To enter a custom CSS class to your item, you need to do the following:

  • Click the "Screen Options" tab in the top right corner of the page.
  • Under "Show advanced menu properties", tick the "CSS Classes" checkbox.
  • Now for every menu item, you have a field labelled "CSS Classes (optional)" where you can enter "icon-fixed-width icon-home".

Job done! :)

share|improve this answer
    
I knew about that already, but thanks for the suggestion. I always have that to fall back on in case this doesn't work. According to his tutorial he's putting the <i> tag directly in the Navigation Fields: jasonbradley.me/icons-in-the-wordpress-menu/#comment-742 –  JP Lew Aug 24 '13 at 12:23
    
I'd agree and advise against isnerting html markup, if you really must have an element to style, use :after and :before css selectors –  Tom J Nowell Aug 24 '13 at 12:49
    
I just gave it a try. In my case, inserting the <i class="icon-fixed-width icon-home"></i> into the Title field of my menu item does work: the markup is hidden on the frontend. But the method of just using the "CSS Classes" field also works with Font Awesome, and seems a much cleaner way. –  manu Sep 4 '13 at 19:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.