Problema con Social Icons

[alvaaz]

Saludos comunidad,

Tengo una duda, resulta que quiero este resultado.



Lo estoy realizando con los siguientes códigos:

Código HTML:

<div class="contenedor-social">
                
            <span class="texto-social">Contáctenos</span>           
            
            <div class="iconos-social">
                <!-- Se crea una lista no ordenada -->
                
                    <ul class="iconos-sociales">
                        <li class="facebook">
                            <a href="http://www.facebook.com/" target="_blank" title="Facebook">Facebook</a></li>
                        <li class="twitter">
                            <a href="http://www.twitter.com/" target="_blank" title="Twitter">Twitter</a></li>
                        <li class="youtube">
                            <a href="http://www.youtube.com/" target="_blank" title="YouTube">YouTube</a></li>
                        <li class="vimeo">
                            <a href="http://www.vimeo.com/" target="_blank" title="Vimeo">Vimeo</a></li>
                    </ul>
                    
            </div>
        
</div>
 

Código CSS:

.texto-social {
 
    text-align: left;
}
 
.contenedor-social ul li{
 
    display: inline-block;
 
}
 
.contenedor-social ul li a {
 
    text-indent: -9999px;
    
}
 
/* @group Iconos Sociales */
 
.facebook {
    
    background: url('/Users/alvarogoederivera/Desktop/Diseño/Prabhu/Página Prabhu/imagenes/facebook.png');
    width: 32px;
    height: 32px;
    margin: 5px;
        
}
 
.twitter {
    
    background: url('/Users/alvarogoederivera/Desktop/Diseño/Prabhu/Página Prabhu/imagenes/twitter.png');
    width: 32px;
    height: 32px;
    margin: 5px;
}
 
.youtube {
    
    background: url('/Users/alvarogoederivera/Desktop/Diseño/Prabhu/Página Prabhu/imagenes/you-tube.png');
    width: 32px;
    height: 32px;
    margin: 5px;
}
 
.vimeo {
    
    background: url('/Users/alvarogoederivera/Desktop/Diseño/Prabhu/Página Prabhu/imagenes/vimeo.png');
    width: 32px;
    height: 32px;
    margin: 5px;
}
 
/* @end */
 

Deseo que cuando pase el Mouse por cada icono se oscurezca un poco y al pinchar me dirija al lugar.

Tengo problema con que el <span> se situe al lado de los iconos.

Estuve viendo algunas páginas que con esta clase

Código CSS:

ul.social-icons li[class] a {
text-indent: -9999px; }
 

el texto de los Links se iban a un extremo izquierdo de la pantalla, haciendo que desaparezca pero a mi no me resulta y así me queda.