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

Question

I am trying to show this menu in wordpress using wp_nav_menu(); but due to less knowledge i can't understand how to do this task. kindly help me and please share code if you have any idea.

<div class="pull-left">
<nav>
<ul class="sf-menu sf-js-enabled sf-shadow l_tinynav1" id="nav">
                  <li class="first-level-li"> <a href="<?php bloginfo('url'); ?>" class="first-level-link 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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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">
                    <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>

now i am using this but its static and one more thing i am also facing active menu issue too. please share code with me or telme how can i add active class in static menu which one is clicked so show this is your position now.

Answer 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

Answer 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.