Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

ICONES REDES SOCIAIS NÃO APARECEM!

Boa tarde. Sei que muita gente está com o mesmo problema que eu, porém já entrei em varios topicos e não consegui solucionar e achar o erro do meu problema! Os icones, mesmo eu colocando o end do diretorio bruto, não aparece e no console não acusa nenhum erro e quando passo o mouse em cima dos icones na pagina da bio.html, é como se os icones estivessem la 40x40 bunitinho só que nao aparece a imagem deles! podem me ajudar por favor? segue o código css!

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    line-height: 30px;
}

h1, h2 {
    font-family: "Open Sans Condensed", "Arial", sans-serif;

}

.titulo-principal {
    font-size: 60px;
    background-color: #851944;
    text-align: center;
    color: rgb(250, 255, 250);
    padding: 25px;
    border-bottom: 10px solid rgb(0, 0, 0);
    margin: 0px;
    text-transform: uppercase;    
}

p {
    margin: 20px 0;
    text-align: justify;
}

.depoimentos {

    background-color: #D9E5E3;
    padding: 20px;
    border: 10px solid #C2CCCA;
    width: 250px;
    margin: 20px 40px;
    box-sizing: border-box;

}

.navegaçao-site {

    background-color: #3C1D3D;
    color: #F2FFFC;
    padding: 20px;
    text-align: center;

}

#rodape-pagina {

    background-color: rgb(0, 0, 0);
    color: #F2FFFC;
    padding: 5px;

}

nav a {

    color: #F2FFFC;
    text-transform: lowercase;
}

main a {

    color: #851944;
}

aside a {

    font-family: "Open Sans Condensed", "Arial", sans-serif;
    color: inherit;
}

.corpo-texto {

    width: 720px;
    padding: 40px 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 80px;

}

aside h1 {

    font-size: 30px;
    margin-bottom: 25px;
}

strong {

    font-weight: bold;
}

em {

    font-style: italic;
}

h2 {

    font-size: 30px;
    clear: both;
}

.icones-sociais li {

display: inline-block;

}

.icones-sociais a {

width: 40px;
height: 40px;
display: block;
text-indent: -99999px;
}

.github {

    background-image: url(C:\Users\sanre\Desktop\HTML5 e CSS3 - Primeiras paginas da web\imagens\github.png);
}

.twitter {

    background-image: url(C:\Users\sanre\Desktop\HTML5 e CSS3 - Primeiras paginas da web\imagens\twitter.png);
}

.linkedin {

    background-image: url(C:\Users\sanre\Desktop\HTML5 e CSS3 - Primeiras paginas da web\imagens\linkedin.png);
}


article {

    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}

.link-leiamais {

    color: black;
    background-color: #E6E7E8;
    font-size: 24px;
    padding: 8px;
    margin: 16px;
    border: 1px solid black;
    text-align: center;
    display: block;
}

.fiat {
    float: right;
}

.petrobras {
    float: left;
}

cite {
    font-style: italic;
    float: right;
}

aside, img {

    float: right;
    box-sizing: border-box;
    border-left: 10px solid black;
    border-bottom: 10px solid black;

}

aside {
    clear: right;
    width: 15%;
    position: relative;
    top: 310px;


}

main {
    float: left;
    width: 85%;
}

footer {
    clear: both;
    position: fixed;
    bottom: 0px;
    width: 100%;
}

img{
    position: absolute;
    top: 0px;
    right: 0px;
}
3 respostas
solução!

Fala ai Victor, olhando meio por cima o código, acho que problema deve estar na URL do background-image.

Tente mudar para:

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

Para ter mais certeza, teria que ver como está a estrutura do projeto, pastas e HTML.

Mas chutando que seu css esteja em uma pasta separada, sugiro essa modificação.

Caso continue com problema, sobe o projeto no github que eu vejo melhor com mais calma.

Espero ter ajudado.

Oi Victor,

Usando a url absoluta no background-image o código só vai funcionar no seu computador. Mas esse nem é o problema nesse caso.

A sua pasta tem espaços no nome. Para que isso funcione, a url precisa ficar dentro de aspas. O código ficaria assim:

 background-image: url("C:\Users\sanre\Desktop\HTML5 e CSS3 - Primeiras paginas da web\imagens\twitter.png");

Matheus e Artur, obrigado pela ajuda e atenção! consegui resolver o problema fazendo como o Matheus disse...eu não estava conseguindo pois estava usando a "/" ao contrária! desatenção a minha. Sobre colocar entre aspas o diretório, eu já havia tentado mas sem sucesso!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software