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

Imagens não aparecem no backgorund-image

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 Nathan Rabelo
| 179k xp | 12 posts
Analista Desenvolvedor

Olá, as imagens das redes sociais não estão aparecendo no bio.html, apenas os links sem nada.

 </ul>
                <ul class="iconesRedesSociais">    
                    <li><a class="github" href=" https://github.com/joaodasilva">github</a></li>
                    <li><a class="twitter" href=" https://twitter.com/joaodasilva">twitter</a></li>
                    <li><a class="likedin" href=" https://br.linkedin.com/pub/joão-da-silva/32/4/508">likedin</a></li>
                </ul>

e no bio.css

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

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

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

.linkedin {
    background-image: url(linkedin.png);
}
3 respostas
solução!
por Natan Souza
| 2101.6k xp | 3699 posts
Instrutor Product Design Lead

Oi Nathan, tudo certo?

Dá uma conferida no local dessas imagens. De acordo com o seu código, elas precisam estar junto com o arquivo CSS.

Fiz o teste aqui com o seu codigo e está funcionando.

Ah, o nome da classe do terceiro ícone está faltando uma letra também.

Abcs!

por Nathan Rabelo
| 179k xp | 12 posts
Analista Desenvolvedor

Obrigado pela ajuda! estava faltando uma letra mesmo e ja vi o que estava acontecendo. Dúvida esclarecida

por Anna Carolina Alvarenga de Jesus
| 27.2k xp | 1 posts
Analista de Sistemas Jr. 
Estou com a mesma dúvida

css

.icones-redes-sociais a {
    width: 40px;
    height: 40px;
    display: inline-block;
    font-size: 0px;
}

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

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

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


HTML

<aside class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-redes-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>