De que maneira eu consigo fazer com que os ícones e as palavras fiquem alinhadas entre si? Para que independente do tamanho da palavra todas comecem no mesmo ponto, pois no projeto é possível ver nitidamente no botão do gitHub como o ícone e o texto está desalinhado em relação aos outros 2, fazendo com que fique assimétrico.
E aí, Maria Eduarda! Entendi direitinho o que tu tá querendo fazer.
Quando tu tem ícones e texto no mesmo elemento, como botões por exemplo, é comum que eles não alinhem automaticamente. Mas fica suave, a gente pode usar algumas propriedades do CSS pra deixar tudo alinhado.
O que tu pode fazer é usar a propriedade vertical-align pra alinhar o ícone com o texto na mesma linha de base. Normalmente, um valor como middle ou top funciona bem.
Suponhamos que tu tenha um botão com um ícone e um texto, tipo assim:
<button class="botao">
<i class="icone"></i>
Meu Texto
</button>
No CSS, tu pode fazer o seguinte:
.botao {
display: inline-flex;
align-items: center;
}
.icone {
font-size: 20px; /* ajusta o tamanho do ícone conforme necessário */
margin-right: 5px; /* dá um espacinho entre o ícone e o texto */
vertical-align: middle; /* alinha o ícone verticalmente no centro do texto */
}
Usando display: inline-flex; no botão, tu tá permitindo que o ícone e o texto fiquem na mesma linha. O align-items: center; alinha eles verticalmente no centro.
Depois, a classe .icone tem vertical-align: middle; pra garantir que o ícone fique alinhado com o texto.
Isso deve te ajudar a alcançar o alinhamento legal entre os ícones e o texto nos botões ou em qualquer lugar que tu precisar. Se tiver mais alguma dúvida, é só chamar!