Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Icones das redes sociais não aparecem

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

por Leonardo Leite Meira
| 94.3k xp | 42 posts
Autónomo

Durante a aula 9 segui as instruções do professor mas os ícones das redes sociais não apareceram de fundo. Consegui tirar as palavras normalmente e ficou um espaço vazio clicavel pois a imagem não está aparecendo de fundo e as palavras foram removidas. Os links que eu utilizei no código foram os mesmos que tinham sido usados anteriormente e funcionado.

Código HTML

<ul class="icones-sociais">
                <li>
                    <a href="https://github.com/joaodasilva" class='github'>
                        Github
                    </a>
                </li>
                <li>
                    <a href="https://twitter.com/joaodasilva" class='twitter'>
                        Twitter
                    </a>
                </li>
                <li>
                    <a href="https://br.linkedin.com/pub/joão-da-silva/32/4/508" class='linkedin'>
                        LinkedIn
                    </a>
                </li>
            </ul>

Código CSS

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

.github {
    background-image: url(C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\projeto 1\github.png);
}

.twitter {
     background-image: url(C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\projeto 1\twitter.png);
}

.linkedin {
    background-image: url(C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\projeto 1\linkedin.png);
}
4 respostas
por Luiz Fernando Maehana
| 610.1k xp | 403 posts
Desenvolvedor Front-end

Olá Leonardo!

Tente colocar entre aspas


.github {
    background-image: url("C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\projeto 1\github.png");
}

.twitter {
     background-image: url("C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\projeto 1\twitter.png");
}

.linkedin {
    background-image: url("C:\Users\leona\Desktop\Cursos Alura\HTML & CSS\HTML & CSS5 1\projeto 1\linkedin.png");
}

Abraços!

por Leonardo Leite Meira
| 94.3k xp | 42 posts
Autónomo

Não funcionou colocar entre aspas.

solução!
por Luiz Fernando Maehana
| 610.1k xp | 403 posts
Desenvolvedor Front-end

As imagens estão na mesma pasta que o arquivo CSS? por que se estiver, você pode deixar apenas


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

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

.linkedin {
    background-image: url("linkedin.png");
}
por Leonardo Leite Meira
| 94.3k xp | 42 posts
Autónomo

Coloquei as imagens na mesma pasta do arquivo CSS igual você falou e funcionou, muito obrigado, devia estar dando algum erro nele link.