5
respostas

Icones errados

Meus icones ficaram errados...nao encontrei o problema.

body {
    font-family: "Crimson Text", "Times New Roman", serif;
    background-color: #F2FFFC;
    font-size: 120%;
    line-height: 1.5;
}

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

main h1 {
    text-align: center;
    background-color: #851944;
    color: #FFF;
    padding: 25px;
    border-bottom: 10px solid black;
    font-size: 60px;
    text-transform: uppercase;
}

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

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

aside {
    background-color: #3C1D3D;
    color: #F2FFFC;
}

footer {
    background-color: #000;
    color: #F2FFFC;
}

nav a {
    color: #F2FFFC;
}

main a {
    color: #851944;
}

aside a {
    color: inherit;
    font-family: "Open Sans Condensed", sans-serif;
}

blockquote, aside, footer {
    padding: 20px;
}

main div {
    width: 720px;
    margin: auto;
    padding: 30px 0;
}

aside {
    text-align: center;
}

aside h1 {
    font-size: 30px;
    margin-bottom: 25px;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

h2 {
    font-size: 30px;
}

.icones-redes-sociais 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);
}
5 respostas

Oii Bruno, que tipo de erro aconteceu?

Os ícones estão na mesma pasta do CSS? Pois pelo caminho que você está informando url(linkedin.png), os mesmos tem que estar na mesma pasta para funcionar.

Estão sim. Só que ao invés de ficarem um ao lado do outro eles ficaram empilhados(um em cima do outro) e não encontrei o por que.

Seria legal poder ver, além do CSS, o HTML da sua página para podermos ter uma noção melhor da disposição dos ícones.

Oii Bruno,

se seus ícones estiverem dentro das tags <ul> e <li>, você deve colocar o display: inline-block na <li>. E na tag <a>, pode usar display: block para que funcione as propriedades width e height.

Faça o teste e nos avisa no que deu! ;)

abraços

Bruno, conseguiu resolver seu problema?

Se sim por favor marque como solucionado :)

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