Olá pessoal 
eu trouxe para vocês um menu com ícones muito bom eu estou usando em um Página minha resolvi postar para vocês 

Index.html

Código:

<html>
<head>
   <title>Wind Menu com icones</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="nav">
   <ul>
      <li><span class="home" ></span><a href="#">Home</a></li>
      <li><span class="service" ></span><a href="#">Serviços</a></li>
      <li><span class="sobre" ></span><a href="#">Sobre Nós</a></li>
      <li><span class="portfolio" ></span><a href="#">Portfolio</a></li>
      <li><span class="eventos" ></span><a href="#">Eventos</a></li>
      <li><span class="contato" ></span><a href="#">Contato</a></li>
   </ul>
</div>

</body>
</html>



Style.css

Código:

body { background: #222; }

/*=== windownsservers.jimdo.com menu com icones ===*/
#nav { width: 960px; background: #fff; margin: 180px; float: left; border-radius: 5px; }
#nav ul { margin: 0; padding: 0; list-style: none; width: 100%; float: left; }
#nav ul li { float: left; font: 16px arial; border-right: 1px solid #eee; }
#nav ul li a { color: #888; text-decoration: none; padding: 20px; display: block; }
#nav ul li:hover { background: #eee; }
#nav ul li .home { background: #049 url(image/01-home.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .service { background: #489 url(image/02-serviços.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .sobre { background: #874 url(image/03-sobre.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .portfolio { background: #987 url(image/04-portfolio.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .eventos { background: #076 url(image/05-evento.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }
#nav ul li .contato { background: #473 url(image/06-contato.png) no-repeat center ; float: left; width: 100%; padding: 30px 0; margin-bottom: 15px;  }



Icones 

Home [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Serviços [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
sobre [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
portfolio [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
evento [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
contato [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]