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

[Dúvida] Icones mudando de tamanho

Boa noite, quando coloco os ícones, eles ficam grandes mesmo tamanho dos botões. qnd diminuo o tamanho da borda ele volta ao normal, o que to fazendo de errado ?

width: 350px; width: 350px;

width: 20px;

width: 20px;

codigo

6 respostas

Amigo, estava com o mesmo problema e consegui resolver mudando o valor ali da linha 69 no padding de 0 para 60...acho que ja vai resolver! Espero ter ajudado...abraço!

Não resolve, ali no caso é a distancia dos itens dentro do botão para a borda, mesmo distanciando o icone ainda continua grande.

eu tentaria mexer no width da linha 63 colocava alguma porcentagem ou algo do tipo, por exemplo como eu fui trabalhando todo meu documento com tamanhos "em" e "rem" quando chegou nessa parte coloquei 50% e ele ficou do tamanho que eu queria.

espero ter ajudado bons estudos, qual quer coisa fala que eu repondo novmanete.

Tenta trocar o width de 350px pra 50% e um text align center, vai alinhar tudo pro meio da borda

Isso acontece porquê você definiu o botão como "display: flex", que por padrão ele define a propriedade "align-items: stretch;", deixando assim os filhos esticados para caber dentro do container pai. Quando você diminui o tamanho do pai não tem espaço para o ícone esticar. Sendo assim para corrigir atribua a propriedade "align-items" no "bt" e defina um valor diferente de "stretch", como por exemplo "flex-start", "center" ou "flex-end":

.bt{
    display: flex;
    /* alinhando verticalmente */
    align-items: center;
    /* alinhando horizontalmente */
    justify-content: center;
}

Para saber mais recomento o artigo de Guia de Flexbox da Alura. E para praticar recomendo alguns joguinhos: Flexbox Froggy, Flexbox Defense e Flexbox Zombies.

solução!

Descobri o que era, revisei todo o html e todo css, vi que eu tinha criado uma classe pra definir o tamanho da imagem ao lado do texto pra melhor encaixe, e eu tinha deixado o nome da classe como img, e os valores nessa classe tava alterando as imagens dos icones tbm, kkkkkkkkkk Obrigado aos que tentaram me ajudar, revisando td peguei mais conhecimento de td e resolvi meu primeiro "BUG" kkkkkk