Icon Menu Using Fontawesome Icons

See the Pen navigation menu by Parth (@Parthmy007) on CodePen.

Code :

<ul class="nav">
<li class="nav-item"><a href="home" title="home"><span class="home"></span></a>
</li>
<li class="nav-item"><a href="home">
<span class="portfolio" title="portfolio"></span>

</a>
<ul class="submenu">
<li>

<a href="#wedesign">Web Design</a>

</li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">App Development</a></li>
<li><a href="#">SEO</a></li>
</ul>
</li>

<li class="nav-item"><a href="home" title="blog">
<span class="blog"></span>

</a>
</li>
<li class="nav-item"><a href="home" title="about">
<span class="about"></span>
</a>
</li>
<li class="nav-item"><a href="home" title="contact"> 
<span class="contact"></span></a>
</li>
</ul>

CSS :

@font-face {
  font-family: 'fontawesome';
  src: url('../font/fontawesome-webfont.eot?v=3.0.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
  url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
  url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.nav
{
 list-style: none;
   
 
}
.nav .nav-item
{
 
    float: left;
 background-color: #2CC3A1;
 
 border-bottom: 2px solid #06906E;
 border-left: 0px solid #06906E;
}
.nav .nav-item:hover
{
 background-color: #5591DF;
 
     
}
.nav .nav-item a
{
 text-decoration: none;
 color: white;
 display: block;
 text-align: center;
 padding: 10px 20px;
 
 
}
.nav-item a:hover
{

 

}
/*----- Submenu -----*/
.nav .submenu
{
 list-style: none;
 position: absolute;
 margin: 0;
 padding: 0;
 display: none;
 
}
.nav li:hover .submenu
{
 display: block;
}
.nav .submenu li
{
 background-color: #5591DF;
}
.nav .submenu li:hover
{
 background-color: #80b1ef;
}
.nav .submenu li a
{
 list-style: none;
 text-align: left; 
}
/*---------- set icon ----*/
.nav span:after
{
 display: block;
 font-family: fontawesome;
 text-align: center;
 width: inherit;
 padding-top: 5px;
 font-size: 25px;
 color: white;
}
.nav .nav-item:hover span:after
{
 color: white;
}
.home:after
{
 
  content: "\f015";
}
.portfolio:after
{
 content: "\f012";
}
.blog:after
{
   content: "\f086";
}
.about:after
{
     content: "\f007";
}
.contact:after
{
    content: "\f0e0";
}

Demo