Problema com os ícones sociais

tenta separa as seleções assim, .icones-redes-sociais li { display: inline-block; } .icones-redes-sociais a{ position: relative; }

.icones-redes-sociais a { width: 40px; height: 40px; display: block; text-indent: -999999px;

}

Os ícones apareceram, mas estão bugados, aparecem 2 do mesmo ícone por baixo do texto, na verdade o texto aparece dentro das duas imagens

Juan, tudo bom?

Duas coisas... Sugiro que ponha o alinhamento horizontal pelo "li", e o deixe sem width, pra pegar a área clickavel do "a"...

O fato de estar se repetindo a imagem no fundo é porque não colocou no-repeat nos backgrounds... Tente o código abaixo:

.icones-sociais li{
    display:inline-block;
    position:relative;
}
.icones-sociais li a{ 
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -9999px;
}
.github {
    background-image: url(github.png) center center no-repeat;
}

.twitter {
     background-image: url(twitter.png) center center no-repeat;
}

.linkedin {
    background-image: url(linkedin.png) center center no-repeat;
}

Espero que tenha ajudado, abs!

Testei aqui e as imagens dessa vez sumiram, o único jeito ainda por enquanto é manter como o primeiro código original, porém as imagens não ficam na horizontal

Cara tenta subir seu codigo no https://codepen.io/ que fica mais fácil de ajudar! Porque não entendi o que rolou rs

http://codepen.io/Contadojuan/pen/QdgOEq

footer{
    background-color : rgb(0,0,0);
    color : #F2FFFC;
    font-family: serif;
    font-size: 20px;
    padding: 15px 15px 70px;     /*alterei aqui*/
     }
.icones-sociais li a{ 
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -9999px;
    float:left;    /*alterei aqui*/
    margin-right:5px;    /*alterei aqui*/
 }

Veja se é isso que você queria. Falta você corrigir o caminho das imagens, pois estão com o endereço relativo não encontrado.

Resolvido! Pode me dizer por que alterar o padding do footer e usar o "float" e alterar o tamanho do margin-right resolveram??

Juan tive agora o mesmo problema, mas o problema foi resolvido da seguinte forma. Faz o teste no seu e irá ver que o problema irá desaparecer.

/* acrescentei o .icones-sociais li que não havia na minha programação */

.icones-sociais li { 

    display: inline-block;  

}

/* e ao invés de .icones-sociais li a eu subistituí por .icones-sociais a retirando o li */

.icones-sociais a {

    width: 40px;

    height: 40px;

    display: block;

    text-indent:  -9999px;   

    margin-right: 5px; 

}

Espero ter ajudado ai. Demorei um pouco pra descobrir. Pois provável que a solução que você deu a semântica fica desnecessária.