0

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 '12 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 '12 at 15:27
  • li::after{content:"!";font-family:icon} No need for PHP. – fuxia Dec 25 '12 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 '12 at 16:42
0

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?

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy