I want to add the font awesome iconfont to my menu list items, so I need to make a custom Walker.

Because the font per menu item will be different I was hoping to use the css class in the WP backend to add the name of the icon and then output that css class within the output of the walker.

Example how it should become:

$item_output .= '<a'. $attributes .'><i class="icon-' . [output css class WP backend] . '"></i>';

Does anyone know how to filter the CSS class to be able to add it to the custom walker?

Thanks and Merry Xmas!

  • Why don’t you use the li CSS classes to address the items?
    – fuxia
    Dec 25, 2012 at 10:25
  • Tried that too, however the icon should be placed after the anchor as you can see from the example below.
    – user2015
    Dec 25, 2012 at 15:27
  • li::after{content:"!";font-family:icon} No need for PHP.
    – fuxia
    Dec 25, 2012 at 15:28
  • the FontAwesome I am using already has all kinds of that CSS by itself; on their site it says how to output the fonts and that is after the anchor and before the content. Anyways, thanks for your input!
    – user2015
    Dec 25, 2012 at 16:42

1 Answer 1


ok, I figured it out myself.

instead of using the CSS class (as I cannot figure out how to filter it), I decided to use the description instead.

under the lines with $attributes I have added this line:

$description  = ! empty( $item->description ) ? esc_attr( $item->description ) : '';

And then I added that to the output as:

$item_output .= '<a'. $attributes .'><i class="icon-' . $description . '"></i>';

I would still be interested to hear whether it can be done with class too?

Your Answer

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