CodePen

HTML

            
                  <ul class="nav">
      <li class="active"><a href="#"><i class="icon-home"></i></a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Elements</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
            
          
!

CSS

            
              .nav {
  line-height: 70px;
  margin: 0;
padding: 0;
border: 0;
}
.nav li {
  list-style-image: none;
list-style-type: none;
margin-left: 0;
white-space: nowrap;
display: inline;
float: left;
padding-left: 4px;
padding-right: 4px;
}
.active {
  background: pink;
}
.icon-home {
  background: url(http://i.stack.imgur.com/MNme0.png) 0 0 no-repeat;
  width: 16px;
  height: 14px;
  display:inline-block;
}
body {
  background: gray;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................