Edit in JSFiddle

 jQuery(document).ready(function(){      
$("#nav-bar ul li:contains('Home')").addClass('home');  
$("#nav-bar ul li:contains('Services')").addClass('services');  
$("#nav-bar ul li:contains('Blog')").addClass('blog');
 });
   <div id="nav-bar">
        <ul>
        <li ><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Blog</a></li>
        </ul>    
    </div><!-- End Nav Bar -->
* {
 margin: 0 auto;    
 }

#nav-bar {
width: 80%;
height: 40px;
margin: 50px 0 0 50px;
background-color: #333;
padding: 20px 0 20px 0;
}

li {
    display: inline-block;   
    margin: 10px;
    text-align: center;
    position: reelative;
    width:20%;
    height: 100%;
    font-size: 18px;
}

li a {
   color: white;
   text-decoration: none;
}



li:before {    
    font-family: 'FontAwesome';
    padding:0 10px 0 15px;   
    color: white;
    font-size: 18px;
}


.home:before {
    content:"\f015";     
}

.services:before {
    content:"\f085";     
}

.blog:before {
    content:"\f0a1";    
}

External resources loaded into this fiddle: