how to add font-awesome icon in wordpress wp_nav_menu()

3 comments

1. This process is simple nowadays.

   Goto your wordpress dashboard then select appearance->editor
   and select your theme header.php file.

   add this line in the header section:

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
   

   after adding the above line go to appearance->menu then add the Fa Icon codes beside you menu items

   <i class="fa fa-home" aria-hidden="true"></i>
   

   hope this help

   Log in to Reply

2. <div class="pull-left">
                 <nav>
                   <ul class="sf-menu sf-js-enabled sf-shadow l_tinynav1" id="nav">
                     <?php echo $page_id = $post->ID; ?>
                     <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>" class="first-level-link <?php if(is_home()){ echo "active"; }?> sf-with-ul">
                       <div class="menu-icon"><i class="icon-home icon-large"></i></div>
                       <div class="menu-item-wrapper">
                         <div class="first-level-li-text-link">Home</div>
                       </div>
                       </a> </li>
                     <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=4" class="first-level-link <?php if($page_id==4){echo "active";}?> ">
                       <div class="menu-icon"><i class="icon-user icon-large"></i></div>
                       <div class="menu-item-wrapper">
                         <div class="first-level-li-text-link">About Us</div>
                       </div>
                       </a> </li>
                     <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=6" class="first-level-link <?php if($page_id==6){echo "active";}?>">
                       <div class="menu-icon"><i class="icon-cogs icon-large"></i></div>
                       <div class="menu-item-wrapper">
                         <div class="first-level-li-text-link">Services</div>
                       </div>
                       </a> </li>
                     <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=8" class="first-level-link <?php if($page_id==8){echo "active";}?>">
                       <div class="menu-icon"><i class="icon-briefcase icon-large"></i></div>
                       <div class="menu-item-wrapper">
                         <div class="first-level-li-text-link">Projects</div>
                       </div>
                       </a> </li>
                     <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=10" class="first-level-link <?php if($page_id==10){echo "active";}?>">
                       <div class="menu-icon"><i class="icon-key icon-large"></i></div>
                       <div class="menu-item-wrapper">
                         <div class="first-level-li-text-link">Careers</div>
                       </div>
                       </a> </li>
                     <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=12" class="first-level-link <?php if($page_id==12){echo "active";}?>">
                       <div class="menu-icon"><i class="icon-comments icon-large"></i></div>
                       <div class="menu-item-wrapper">
                         <div class="first-level-li-text-link">FAQ</div>
                       </div>
                       </a> </li>
                     <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>/?page_id=14" class="first-level-link <?php if($page_id==14){echo "active";}?>">
                       <div class="menu-icon"><i class="icon-envelope-alt icon-large"></i></div>
                       <div class="menu-item-wrapper">
                         <div class="first-level-li-text-link">Contact</div>
                       </div>
                       </a> </li>
                   </ul>
   
                 </nav>
               </div>
   

   active class added using custom code.

   Log in to Reply

3. Assuming you are using the markup above, you can simply change the icon-key icon-large classes to reflect those of FontAwesome.

   For example, the ‘home’ icon, which is represented with a house. So, simply replace icon-home icon-large with fa fa-home.

   A list of the FontAwesome icons are available here, click one to see it’s class.

   If you wish to use a dynamic menu then wp_nav_menu is probably not for you. You may find it easier to build your own using wp_get_nav_menu_items. There is a brilliant example on that link of exactly how to do it.

   Log in to Reply