Glificones más grandes

212

¿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 span?

Esto le da un pequeño glificón:

<span class="glyphicon glyphicon-link"></span>

— guiomie
fuente

372

Simplemente puede darle al glifo un tamaño de fuente a su gusto:

span.glyphicon-link {
    font-size: 1.2em;
}

¡Excelente! En mi caso, tenía un input-group-btn con un botón, y este botón era un poco más grande. Así que simplemente di "tamaño de fuente: 95%" para mi glificón y se resolvió.

— victorf

41

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 hacer que se aplique a todos.

— Randy Greencorn
fuente

2

En general, los estilos en línea no son un buen enfoque. Si necesita estilos específicos para algún componente, simplemente aplique el nuevo tamaño de fuente a través de su clase principal

— Kaloyan Stamatov

a veces es único y no se puede molestar sin embargo

— Matthew Lock

29

La .btn-lgclase 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-sizey line-heighta su lapso (ya sea .glyphicon-linkuno nuevo o creado .glyphicons-lgsi va a usar este efecto en más de una instancia), obtendrá un Glyphicon del mismo tamaño que el botón grande.

— Angelique
fuente

44

agregar la btn-lgclase es una opción mucho más fácil. ¡Buena respuesta!

— Neel

6

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>

Expandir fragmento

— barış çıracı
fuente

2

En mi caso, tenía un input-group-btncon un button, y este buttonera un poco más grande que su contenedor. Así que acabo de dar font-size:95%por mi glificón y se resolvió.

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

— victorf
fuente

2

Escribir en <h1>o <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

— tranquilo
fuente

0

Si está utilizando Bootstrap 3, use la etiqueta, como esta Funciona perfectamente para Bootstrap 3.
Incluso puede usar varias etiquetas para establecer el tamaño más pequeño.
Código:


— Valynk
fuente

Esto es exactamente lo contrario de la pregunta ... a menos que anule los estilos, esto lo hará pequeño. Acabo de usar esa etiqueta para su propósito exacto el otro día.

— Richard Barker