Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
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 renatobmpsilva
| 119k xp | 16 posts
Full-stack developer

Na verdade não é uma pergunta: O Ricardo Marques Rodrigues Pereira publicou uma dúvida que ocorreu comigo também, com o título "ícones sociais somem ou não obedecem o inline-block", no qual até o presente momento está sem solução, mas felizmente consegui resolver, porém não pude postar no fórum devido ter mais de 2 dias de abertura ou algo assim. Enfim, segue a solução para o fórum:

No CSS, é necessário usar o seguinte código:

.icones-sociais li{
    display: inline-block;
}
.icones-sociais a{
    width: 40px;
    height: 40px;
    display: block;
    text-indent: -99999px;
}
.github {
    background-image: url(/github.png);
}
.twitter {
    background-image: url(twitter.png);
}
.linkedin {
    background-image: url(linkedin.png);
}

Espero estar ajudando no estudo de quem também teve este problema e na melhoria do curso. Bons estudos para nós!

2 respostas
por Gabriel Leite
| 3485k xp | 5398 posts
Instrutor

Boa noite, Renato! Como vai?

Muito obrigado pela sua colaboração! É com participações como a sua que fazemos da Alura uma plataforma cada vez melhor! Continue assim!

Agora, em relação ao que vc reportou, vc poderia me informar que tópico é esse ao qual vc se refere cujo autor é o Ricardo? Colar o link aqui já seria o suficiente.

Outra coisa, esse é também um problema do curso? Se sim, vc poderia colar aqui o link de qual atividade precisa ser corrigida e qual seria o problema dela?

Novamente, muito obrigado pela sua colaboração!

Grande abraço e bons estudos, meu aluno!

solução!
por renatobmpsilva
| 119k xp | 16 posts
Full-stack developer

Fala Gabriel!

Segue o link do fórum do Ricardo que mencionei:

https://cursos.alura.com.br/forum/topico-icones-sociais-somem-ou-nao-obedecem-o-inline-block-69810

Com relação a atividade, seria de Image replacement, aula 9 do curso de front-end (https://cursos.alura.com.br/course/introducao-html-css/task/5434).

No lugar de usar o código sugerido na atividade, no qual apresentava o mesmo erro que o Ricardo mencionou (ícones não obedecem o inline-block), eu adicionei mais um trecho que resolveu o problema, colocando o inline-block no li e block no a.

Código da atividade:

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

Meu código:

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