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
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