How to add font-awesome icon to wordpress wp_nav_menu ()
I am trying to show this menu in wordpress using wp_nav_menu (); but due to less knowledge I cannot figure out how to do this. kindly help me and please share the code if you have any ideas.
<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 use this but its static and one more thing i also face active menu issue. please share the code with me or telme how can I add an active class to a static menu that needs to be clicked to show that this is your position now.
source to share
<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.
source to share
This process is currently simple.
Go to your Wordpress dashboard, then select appearance-> editor and select your theme.php header file.
add this line to your 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 spawn menu-> then add Fa icon codes next to your menu items
<i class="fa fa-home" aria-hidden="true"></i>
hope this help
source to share
Assuming you are using the markup above, you can simply change the classes icon-key icon-large
to reflect those of FontAwesome.
For example, the "home" icon that is present in the house. So, just replace icon-home icon-large
with fa fa-home
.
A list of FontAwesome icons is available here , click on it to see its class.
If you want to use a dynamic menu, this wp_nav_menu
is probably not for you. You might find it easier to create your own using wp_get_nav_menu_items . There is a prime example of exactly how to do this.
source to share