Editing Wordpress Nav Menu Walker

Question

I have conntected T5_Nav_Menu_Walker to my WP website. https://gist.github.com/thefuxia/1053467

And I want customize my WP menu to be able to add icons from wp-admin via FontAwesome classes. Screenshot: Show

But when I add CSS class in menu nothing outputting in HTML code, because I use t5_nav_walker. How I can add icons in this wordpress walker? Php code of this walker:

<?php # -*- coding: utf-8 -*-
/**
 * Create a nav menu with very basic markup.
 *
 * @author Thomas Scholz http://toscho.de
 * @version 1.0
 */
class menu_walker extends Walker_Nav_Menu
{
    /**
     * Start the element output.
     *
     * @param  string $output Passed by reference. Used to append additional content.
     * @param  object $item   Menu item data object.
     * @param  int $depth     Depth of menu item. May be used for padding.
     * @param  array $args    Additional strings.
     * @return void
     */
    public function start_el( &$output, $item, $depth, $args )
    {
        $output     .= '<li>';
        // $output .= '<li'.($item->current ? ' class="current"':'').'>';
        $attributes  = 'class="app-menu__item"';

        ! empty ( $item->attr_title )
            // Avoid redundant titles
            and $item->attr_title !== $item->title
            and $attributes .= ' title="' . esc_attr( $item->attr_title ) .'"';

        ! empty ( $item->url )
            and $attributes .= ' href="' . esc_attr( $item->url ) .'"';



        $attributes  = trim( $attributes );
        $title       = apply_filters( 'the_title', $item->title, $item->ID );
        $item_output = "$args->before<a $attributes>$args->link_before$title</a>"
                        . "$args->link_after$args->after";

        // Since $output is called by reference we don't need to return anything.
        $output .= apply_filters(
            'walker_nav_menu_start_el'
            ,   $item_output
            ,   $item
            ,   $depth
            ,   $args
        );
    }

    /**
     * @see Walker::start_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function start_lvl( &$output )
    {
        $output .= '<ul class="treeview-menu">';
    }

    /**
     * @see Walker::end_lvl()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    public function end_lvl( &$output )
    {
        $output .= '</ul>';
    }

    /**
     * @see Walker::end_el()
     *
     * @param string $output Passed by reference. Used to append additional content.
     * @return void
     */
    function end_el( &$output )
    {
        $output .= '</li>';
    }
}

Answer 1

You need create additional field for menu item. Because if you will use class field - you will block adding additional class to links. But if it's ok - create <i class="$your_class"></i> before link title. And @Dilip Gupta gave solution to you.

Answer 2

See, you need to update you $item_output variable. fontawesome outputs the icons in this format <i class="fa fa-angle-right"></i>.

you need to add this <i> within your <a> like this.

$item_output = "$args->before"
    . "<a $attributes>"
        . "$args->link_before"
        . "<i class='$variable_which_stores_fontawesomme_value'></i>"
        . "$title"
    . "</a>"
    . "$args->link_after"
    . "$args->after";

$variable_which_stores_fontawesomme_value should be equal to fa fa-angle-right.