Utilizando CSS Sprite

O que é?

Pra quem não conhece, essa é uma técnica que se baseia em combinar diversas imagens em uma só, com o intuito de diminuir o número de requisições HTTP para o servidor. Com isso, tornando seu projeto mais otimizado, ganhando alguns pontinhos com o google.

Veja esta imagem. 

Para não por uma imagem para cada ícone, colocamos uma imagem com todos os ícones e utilizamos aí o css sprite.

Pimeiramente começamos com o html. Mas ao invés de utilizarmos a tag img, aplicamos uma classe para cada um dos itens.

 <div class="icones">    
       <div class="sprite face"></div>    
       <div class="sprite tt"></div>  
       <div class="sprite youtube"></div>  
       <div class="sprite orkut"></div>  
 </div>  

 Agora vamos para o css, o responsável pela "mágica".

.sprite {  
   background: url('img/icones.png') no-repeat 0 0;  
 }  
 .sprite.face {  
   background-position: 0 0;  
 }  
 .sprite.tt {  
   background-position: -35px 0;  
 }  
 .sprite.youtube {  
   background-position: -70px 0;  
 }  
 .sprite.orkut {  
   background-position: -100px 0;  
 }  

Aí basta apenas você ajustar o background-position de acordo com sua imagem.