21.01.2025

Como Aumentar o Tamanho dos Glyphicons no Bootstrap: Exemplo do Globo

Resposta Rápida

Para aumentar o tamanho dos glyphicons, basta definir o valor de font-size no seu CSS. Dessa forma, você pode dobrar o tamanho:

.glyphicon {
    font-size: 2em;  /* "em" é uma unidade de medida incrivelmente versátil para tamanho de fonte!" */
}

Aplique a classe .glyphicon ao seu ícone e ele vai crescer imediatamente diante dos seus olhos.

Usando Diferentes Unidades de Medida

Vamos explorar um pouco mais. Em CSS, você pode usar várias unidades de medida, pois o tamanho realmente importa. Os glyphicons podem ser escalados usando px, em, rem, pt, vw, vh, e até... %?

.glyphicon {
    font-size: 48px;  /* Designer: "Quero que este ícone tenha exatamente 48 pixels!" */
}
/* OU */
.glyphicon {
    font-size: 3em;  /* Designer de UX: "Faça isso um tamanho relativo, a experiência do usuário é importante!" */
}

Criando Classes Estilo Sass

Crie suas próprias classes CSS para escalas, como gi-5x. É como construir seu próprio Font Awesome, só que com menos código:

.gi-5x {
    font-size: 5em;  /* Isso é como espinafre para o Popeye, mas para seus ícones */
}

Adicione a classe gi-5x ao seu elemento span e aproveite um ícone que é cinco vezes maior!

Preparando Glyphicons no Bootstrap

Quer aumentar ícones em cabeçalhos ou jumbotrons? O Bootstrap tem tudo que você precisa:

<h1><span class="glyphicon glyphicon-search"></span> Busca</h1>  /* O ícone vai ganhar novas características */

Usando este método, o ícone herda o tamanho do seu container pai. Você ficará agradavelmente surpreso com o resultado. ☕

Visualização

Glyphicons são figuras que você pode personalizar:

<span class="glyphicon glyphicon-star" style="font-size: 24px;"></span> /* Estrela de tamanho padrão */
<span class="glyphicon glyphicon-star" style="font-size: 48px;"></span> /* Estrela ampliada */

De uma pequena faísca a uma magnífica estrela – ajuste o font-size para determinar quão grandes seus glyphs ficarão! 📏✨

Cuidado: Glyphicons Exigem Precisão

Certifique-se de que os elementos pais, como botões ou grupos de input, não estão obstruindo as mudanças de tamanho:

<button class="btn btn-default">
    <span class="glyphicon glyphicon-plus gi-5x"></span>  /* "Eu diminuí, mas não vou mudar!" */
</button>

Verifique se estilos externos não estão interferindo na escala.

Mais Rápido, Melhor, Mais Forte com Font Awesome

Pensando em migrar para o Font Awesome? Eles oferecem uma multitude de classes pré-definidas para mudanças de tamanho: de fa-lg a fa-2x, fa-3x, e assim por diante.

<i class="fa fa-star fa-3x"></i>  /* "Olha, Mãe, eu sou três vezes maior!" */

Um Adeus Rápido ao CSS Inline

Precisa de uma solução rápida? Dê ao seu ícone um novo tamanho usando estilos inline:

<span class="glyphicon glyphicon-envelope" style="font-size: 80px;"></span> /* "Eu sei como trabalhar com pixels..." */

Essa não é uma solução permanente, mas é um ótimo substituto temporário!

Recursos Úteis

1. Dimensionando Ícones | Documentação do Font Awesome – guia oficial sobre como redimensionar ícones do Font Awesome.
2. Componentes · Bootstrap – documentação sobre Glyphicons do Bootstrap.
3. Tamanho da Fonte CSS – tutorial sobre definição de tamanhos de fonte em CSS.
4. Glyphicons do Bootstrap 3 não estão funcionando - Stack Overflow – resolução de problemas com Glyphicons na comunidade de desenvolvedores do Stack Overflow.
5. font-size - CSS: Folhas de Estilo em Cascata | MDN – mergulho profundo na propriedade font-size.
6. Usando SVG | CSS-Tricks – explore as capacidades do SVG.
7. Rem em CSS: Entendendo e Usando Unidades rem — SitePoint – desbloqueie o potencial do uso da unidade rem em CSS.

Video

Navigation