css - create - Glifos mas grandes

header html example

Question

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

Esto le da un pequeño glyphicon:

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

Answer 1

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 los requisitos ad hoc para cambiar el tamaño, en lugar de cambiar el css y hacer que se aplique a todos.

Answer 2

En mi caso, tenía un input-group-btn con un button , y este button era un poco más grande que su contenedor. Así que solo di font-size:95% para mi glyphicon 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>

Answer 3

Escriba su <span> en <h1> o <h2> :

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

Answer 4

La clase .btn-lg tiene el siguiente CSS en Bootstrap 3 ( link ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Si aplica el mismo font-size y line-height a su intervalo (ya sea .glyphicon-link o un .glyphicons-lg recién creado si va a utilizar este efecto en más de una instancia), obtendrá un Glyphicon del mismo tamaño que el botón grande.

Answer 5

Si está utilizando bootstrap 3, use una etiqueta, como esta <small><span class="glyphicon glyphicon-send"></span></small> Funciona perfectamente para Bootstrap 3.
Incluso puede usar varias etiquetas <small> para establecer el tamaño más pequeño.
Código:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

Answer 6

Solo puedes darle el tamaño de fuente a la glyphicon a tu gusto:

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

Answer 7

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