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.

2 Answers 2


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! :)

  • 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
    Commented Aug 24, 2013 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
    Commented Aug 24, 2013 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
    Commented Sep 4, 2013 at 19:50
  • My menu items had HTML in them but since updating WP to 3.9.2 re-saving the menu results in the label's HTML being stripped. Use the class field rather.
    – Duncanmoo
    Commented Sep 4, 2014 at 15:22
  • This is not answer JP question. He wants to insert HTML on menu label. Commented Feb 6, 2017 at 9:03

Get custom navigation title using page id:

function get_custom_nav_title( $menu_name, $page_id ) { 
    $args = array(
        'order'                  => 'ASC',
        'orderby'                => 'menu_order',
        'post_type'              => 'nav_menu_item',
        'post_status'            => 'publish',
        'output'                 => ARRAY_A,
        'output_key'             => 'menu_order',
        'nopaging'               => true,
        'update_post_term_cache' => false 
    $items = wp_get_nav_menu_items( $menu_name, $args );
    //print_r( $items );
    foreach ( $items as $item ) {
        if ( $item->object_id == $page_id ) {
            return $item->title;
  • 3
    Please add some explanation. Explain why your code should work. Also please format your code. Commented Jul 10, 2015 at 6:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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