Adding fontawesome icons ABOVE WordPress custom menu items

2 Views

I’m creating a custom menu in wordpress and need to put fontawesome icons above each list item in the menu. Before using wordpress I achived this by using this code: 

<ul>
  <li>
    <a href="#">
      <i class="fa fa-home"></i><br />
      Home
    </a>
  </li>

  <li>
     <a href="#">
       <i class="fa fa-cogs"></i><br />
       How it works
     </a>
  </li>

  <li>
    <a href="#">
      <i class="fa fa-question-circle"></i><br />
      Why use us?
    </a>
  </li>
</ul>

Anyone know how to do this using the menu editor in wordpress?

Post Views: 2

Related posts

Leave a Reply

2 comments

  1. You could create a custom Walker_Nav_Menu in your functions.php file. It would look something like this (using this as a reference for where to start):

    class Icon_Walker extend Walker_Nav_Menu {
  function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0)
  {
    // Check the reference file for most of this

    // This is the class you set in the menu page.
    // Alternatively, you could use the any of the other inputs from the menu page
    $icon_class = $item->classes;

    //This goes before https://core.trac.wordpress.org/browser/tags/3.8.1/src//wp-includes/nav-menu-template.php#L151
    $item_output .= '<i class="' . $icon_class . '"></i><br>';
    // basically copy the rest of the reference method
  }
}

    Then, where you include the menu:

    wp_nav_menu(array( 'walker' => new Icon_Walker ));

    Hope that helps.

  2. Old question, but I recently had to figure out how to use another icon font in a dynamic WP menu, and while the other answer here is a great solution, it might be too complex for the non-php savvy to implement.

    You can still use a variation of your original example of class="fa fa-[icon_name]".

    The option to add the classes to the menu items is hidden by default under the Screen Options tab when you’re creating/editing menus at /wp-admin/nav-menus.php. (“Show advanced menu properties” > “CSS Classes”.)

    Once you’ve enabled the advanced options, you can add the fa fa-[icon_name] classes to each menu item <li> and your icon font’s :before pseudo selection will kick in as long as you’ve installed your icon font and added the proper CSS (using whatever procedure your theme uses for custom font usage).

    Note: you’ll need to specify the style of the anchors that wordpress generates within your <li>s to use your normal text font-styles, as well as do some additional style updates to get the icon to sit with the text properly.

    Lastly, if you want the icons to be clickable (which is probably what you’re used with the <i> elements nested in anchors technique from your example, you can update your icon font CSS to use to use .fa-[icon_name] a:before.