icones rede social

Pessoal tenho uma duvida, uma duvida não uma dificuldade já bati muito cabeça, e pesquisei muito antes de vir aqui, bom é o seguinte quero adicionar icones de rede social no meu site para estudos.......

Tem esse código que conheço.....

<a><img></img></a>
mas queria botar pelo css por exemplo...

nav ul li .facebook {
background:url(../img/facebook.png) no-repeat
}

só que beleza, quando faço o menu no html....

<nav>
 <ul>
 <li class="facebook"><a href="facebook.com>Facebook</a></li>
 <li class="twitter"><a href="twitter.com>Facebook</a></li>
 <li class="google"><a href="google.com>Facebook</a></li>
 </ul>
</nav>

mas quando passo o mouse em cima, não pega a ancora, pq no css, eu tenho que dar um text-ident:-999px para não ficar os nomes em cima dos ícones, alguém pode me ajudar a resolver isso,

não sei o que fazer para o link funcionar....

Vlw