Edit in JSFiddle


              
<div id="nav">
  <ul id="navbar">
    <li><a class="icon img1" href="#">Item1</a></li>
    <li><a class="icon img2" href="#">Item2</a></li>
    <li><a class="icon img3" href="#">Item3</a></li>
  </ul>
</div>
#navbar{
  list-style-type:none;
}

#navbar li{
  display:inline;
  margin-right:16px;
}

a.img1{
  background:url(http://www.sucai.com.cn/bizhi/flashAll/20111009/1318124792fVsTdB.jpg);
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position:0px center;
  padding-left: 26px;
}

a.img2{
  background:url("http://s9.knowsky.com/bizhi/l/20090606/oumeinvxinggaoqingbizhi%20(10).jpg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position:0px center;
  padding-left: 26px;
}

a.img3{
  background:url("http://1.bp.blogspot.com/_WU2wcpWvRPk/THCPQPNK7kI/AAAAAAAADqQ/QJ0YAZ32zYw/s1600/%E4%B8%96%E4%B8%8A%E6%9C%80%E6%80%A7%E6%84%9F%E7%9A%84%E5%A5%B3%E6%80%A7%E3%80%8D%E6%BD%94%E8%A5%BF%E5%8D%A1%C2%B7%E8%89%BE%E5%B7%B4+%E6%BD%94%E8%A5%BF%E5%8D%A1%C2%B7%E8%89%BE%E5%B7%B4.jpg");
  background-repeat: no-repeat;
  background-size: 24px 24px;
  background-position:0px center;
  padding-left: 26px;
}

External resources loaded into this fiddle: