Entrar Ainda não tem acesso?
5
respostas

ícones sociais somem ou não obedecem o inline-block

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Nem tudo é o que parece e atividade Image replacement

por Ricardo Marques Rodrigues Pereira
| 13.1k xp | 7 posts

Quando coloco o text-indent no CSS as imagens somem junto com o texto. Olhei outras dúvidas similares, tentei aplicar as soluções, mas nenhuma funcionou.

Quando uso:

icones-sociais a {
    display: block;
    width: 40px;
    height: 40px;
    text-indent: -99999px;
}

.github {
    background-image: url(github.png);
}

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

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

Ele aparece certo, um ícone embaixo do outro sem o texto, mas se coloco: inline-block ele simplesmente ignora e continua mantendo um ícone embaixo do outro.

Se eu uso:

.icones-sociais li {
    display: inline-block;
    width: 40px;
    height: 40px;
    text-indent: -99999px;
}

.github {
    background-image: url(github.png);
}

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

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

Eles "marcam" no HTML como se estivessem um ao lado do outro mas não aparecem.

Help me!

5 respostas
por Ricardo Marques Rodrigues Pereira
| 13.1k xp | 7 posts

Outra tentativa frustrada:

.icones-sociais a {
    width: 40px;
    height: 40px;

}

.icones-sociais li {
        display: inline-block;

}

.github {
    background-image: url(github.png);
}

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

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

Os ícones ficam lado-a-lado, mas os textos não somem e ficam por cima.

por Bruno Oliveira da Silva
| 135.5k xp | 2 posts

Coloque assim:

.icones-sociais li {
        display: inline-block;

}

.icones-sociais a {
    display: inline-block;
    width: 40px;
    height: 40px;

}

.github {
    background-image: url(github.png);
}

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

.linkedin {
    background-image: url(linkedin.png);
}
por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Ricardo, testa a ideia do Bruno e dá um retorno aqui por favor.

por Ricardo Marques Rodrigues Pereira
| 13.1k xp | 7 posts

Quando coloquei o seu código, os ícones sumiram. :/

por Wanderson Macêdo
| 3964.9k xp | 8086 posts
Instrutor Desenvolvedor

Ricardo, compartilha seu projeto com a gente? Seja uma pasta no Google Drive ou um repositório no GitHub, Dropbox. Qualquer forma. Assim baixo aqui e vejo o projeto de perto e te indico a solução...