CodePen

HTML

            
              

/////////////////////////////////////////////////
///first : add arguments to wp_nav_menu()
////////////////////////////////////////////////

'link_before' => '<i class="myIcon-lsp" "aria-hidden="true"></i><span>;
'link_after' =>'</span>';


/////////////////////////////////////////////////
///secondly, use the walker to add "MyIcon-'. $slug .' class to the <i> element
////////////////////////////////////////////////
$slug = sanitize_title($item->title);
$item_html = preg_replace('/<i[^>]*>(.*)<\/i>/iU', '<i class="MyIcon-'. $slug .'"></i>', $item_html);

//////////////////////////////////////////////////
the full Roots walker with the above code inserted :
//////////////////////////////////////////////////

class Roots_Nav_Walker extends Walker_Nav_Menu {
  function check_current($classes) {
    return preg_match('/(current[-_])|active|dropdown/', $classes);
  }

  function start_lvl(&$output, $depth = 0, $args = array()) {
    $output .= "\n<ul class=\"dropdown-menu\">\n";
  }

  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
    $item_html = '';
    parent::start_el($item_html, $item, $depth, $args);

    if ($item->is_dropdown && ($depth === 0)) {
      $item_html = str_replace('<a', '<a class="dropdown-toggle" data-toggle="dropdown" data-target="#"', $item_html);
      $item_html = str_replace('</a>', ' <b class="caret"></b></a>', $item_html);
    }
    elseif (stristr($item_html, 'li class="divider')) {
      $item_html = preg_replace('/<a[^>]*>.*?<\/a>/iU', '', $item_html);    
    }
    elseif (stristr($item_html, 'li class="nav-header')) {
      $item_html = preg_replace('/<a[^>]*>(.*)<\/a>/iU', '$1', $item_html);
    }   

//////////////////////////////////////////////////////////////  
  //ICON SPECIFIC CLASSES
   //customize the walker to add icon classes 
//////////////////////////////////////////////////////////////

   $slug = sanitize_title($item->title);
   $item_html = preg_replace('/<i[^>]*>(.*)<\/i>/iU', '<i class="MyIcon-'. $slug .'"></i>', $item_html);

/////////////////////////////////////////////////////////////

    $output .= $item_html;
  }

  function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
    $element->is_dropdown = !empty($children_elements[$element->ID]);

    if ($element->is_dropdown) {
      if ($depth === 0) {
        $element->classes[] = 'dropdown';
      } elseif ($depth === 1) {
        $element->classes[] = 'dropdown-submenu';
      }
    }

    parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
  }
}
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................