add span class and i tag inside wp_nav_menu link anchor tag

Question

I found examples adding a class to top level items, so we can display an arrow in menu items with sub-items, but is seems terrible to cope with the already built in WordPress classes, can't display the arrow with current and css hover, it just ruins all states.

The current nav menu is like this <li><a>Text</a></li>

Is there someway to add a <span class="something"><i class="something"></i></span> within the parent <a></a> tags instead?

Example

<li class="main-nav__item">
      <a class="main-nav__item-link" href="index.html">
            <span class="main-nav__item-icon-wrapper">
                   <i class="main-nav__item-icon icon-home"></i>
            </span>
            <span class="main-nav__item-content">Home</span>
      </a>
</li>
<li class="main-nav__item">
        <a class="main-nav__item-link" href="index.html">
               <span class="main-nav__item-icon-wrapper">
                     <i class="main-nav__item-icon icon-Blog"></i>
               </span>
               <span class="main-nav__item-content">Blog</span>
        </a>
</li>

The current code Adds the tags outside the tags that is parent

class Walker_Nav_Menu extends Walker {

    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"main-nav\">\n";
    }
}

Answer 1

You can use the wp_nav_menu() arguments like so:

wp_nav_menu( array(
    'menu'          => 'Whatever Your Menu Name Is',
    'link_before'   => '<span class="main-nav__item-icon-wrapper"><i class="main-nav__item-icon icon-home"></i></span><span class="main-nav__item-content">',
    'link_after'    => '</span>'
) );

link_before and *_after will add anything before/after the text inside the link where just the normal argument before and after will add anything before/after the entire link but still inside the list-item.

This will add them to all the list items but you can use CSS to style them or not display them however you wish and I think it's faster and easier than working with a walker.