Como alterar o tamanho do ícone no Boostrap

Neste artigo você aprenderá como alterar o tamanho do ícone no Boostrap, de uma maneira fácil e rápida sem gambiarras, utilizando CSS puro.

Fala programador(a), beleza? Bora aprender coisa nova!

Uma grande facilidade que os frameworks/libs como o Bootstrap nos proporcionam são os ícones

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

Hoje o Bootstrap utiliza uma biblioteca externa, ou seja, os ícones não são nativos dele

Obs: Na versão 4, tem uma chance de se tornarem nativos

Mas o que eu quero dizer com isso é que você provavelmente está utilizando Font Awesome, ou outra fonte de ícones

E uma fonte de ícones é a mesma coisa que uma fonte de letras

Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.

E o que isso quer dizer? Que basta aumentar o font-size com CSS ou até adicionar outros estilos como color, que irá funcionar exatamente da mesma forma como se fosse uma letra

Veja um exemplo:

.fas.fa-anchor {
 font-size: 30px;
 color: red;
}

Neste caso, por exemplo, alteramos o ícone de ancora para um tamanho de 30px e também uma cor vermelha

E dessa forma você pode alterar os seus ícones também, apenas identifique a classe de CSS e aplique a regra

Veja que não tem mistério, como se fosse alterar o estilo de uma tag <p> que é puro texto

Altere também os seus ícones, que os estilos funcionarão da mesma forma

Conclusão

Neste artigo vimos como alterar o tamanho do ícone no Boostrap

E é muito simples, apenas aplicamos estilos iguais aos de fonte de letras

Por exemplo para aumentar o tamanho: font-size, se fosse para mudar a cor: color, cor de fundo: background-color e assim por diante

Faça seus testes e veja como é fácil fazer estas alterações nas fontes de ícones

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube