Glifos más grandes
¿Cómo puedo hacer Glyphicons más grandes en Twitter Bootstrap 3.0 (no 2.3.x)?
Este código hará que mis glifos sean grandes:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-th-list">
</span>
</button>
¿Cómo puedo obtener este tamaño sin usar la clase btn-lg mientras uso solo un intervalo?
Esto da un pequeño glifo:
<span class="glyphicon glyphicon-link"></span>
Puedes simplemente darle al glifo un tamaño de fuente a tu gusto:
span.glyphicon-link {
font-size: 1.2em;
}
Así es como lo hago:
<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>
Esto le permite cambiar el tamaño sobre la marcha. Funciona mejor para requisitos ad hoc para cambiar el tamaño, en lugar de cambiar el CSS y aplicarlo a todos.
La .btn-lg
clase tiene el siguiente CSS en Bootstrap 3 ( enlace ):
.btn-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
}
Si aplica lo mismo font-size
a line-height
su intervalo (ya sea .glyphicon-link
o uno recién creado .glyphicons-lg
si va a usar este efecto en más de una instancia), obtendrá un Glyphicon del mismo tamaño que el botón grande.