ícones sociais somem ou não obedecem o inline-block | HTML5 e CSS3 I: Suas primeiras páginas da Web

5
respostas

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

21/09/2018

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

27/09/2018

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

| 3960.2k xp | 8086 posts

Instrutor Desenvolvedor

27/09/2018

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

por Ricardo Marques Rodrigues Pereira

| 13.1k xp | 7 posts

09/10/2018

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

por Wanderson Macêdo

| 3960.2k xp | 8086 posts

Instrutor Desenvolvedor

11/10/2018

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...