Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Dúvida tamanho do ícone

Referente ao curso HTML e CSS: cabeçalho, footer e variáveis CSS

por Julia de Freitas Bueno
| 27.9k xp | 4 posts

Olá, alguém consegue me ajudar? Verifiquei todas as linhas do HTML e CSS e não consegui identificar o que pode estar causando o erro no tamanho do ícone nos botões.

HTML:

<div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
                <a class="apresentacao__links__link" href="https://github.com/buenojulia">
                    <img src="./assets/github.png"> 
                    Github
                </a>
                <a class="apresentacao__links__link" href="https://www.linkedin.com/in/julia-bueno/">
                    <img src="./assets/linkedin.png"> 
                    LinkedIn
                </a>
            </div>

CSS:

.apresentacao__links{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

.apresentacao__links__subtitulos{
    font-family: 'krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.apresentacao__links__link{
    /* background-color: #22D4FD; */
    border: 2px solid #22D4FD;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}

E está ficando assim:

imagem com os ícones de tamanho desproporcional

1 resposta
solução!
por Maria Alcilania Batista De Lima
| 69.4k xp | 17 posts

Olá Julia! Verifiquei o seu codigo e percebi que voce esqueceu de especificar o tamnho dos seus icones, dessa forma eles nao ficam no tamano que voce gostaria, para fazer isso voce precisa estilizar a imagem tag dentro do elemento pai .apresentacao__links__link . tente fazer dessa forma para ver se seu problema é resolvido. Espero ter ajudado!

.apresentacao__links__link {
    background-color: #22D4FD; 
    display: flex;
    justify-content: center;
    gap:15px;
    border: 2px solid #22D4FD;
    width: 278px;
    align-items: center;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: 'Montserrat', sans-serif;
}
.apresentacao__links__link img{
    width: 15px;
    height: 15px;
}