¿Cómo hago los glifos más grandes? (¿Cambiar tamaño?)


Respuestas:


367

Aumente el tamaño de fuente de glyphiconpara aumentar el tamaño de todos los iconos.

.glyphicon {
    font-size: 50px;
}

Para orientar solo un icono,

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

2
¡Eso funciono! (Lo aceptaré en 5 minutos (ese es el tiempo restante)) ¿Hay alguna forma de centrarlo? @VenomVendor
CoderBryan

2
text-centeren el div.
Aibrean

77
para hacer que el glifo sea más grande "a pedido" use .glyphicon.larger {font-size: 150%; }
user216661

¿Qué hay de hacerlo más delgado?
Nofel

Tuve que agregar !important;al tamaño de fuente para anular el CSS boostrap.
Mientras tanto, el

143

Fontawesome tiene una solución perfecta para esto.

Implementé lo mismo. solo en su archivo .css principal agregue esto

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

En tu ejemplo solo tienes que hacer esto.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>  

¡Agradable! También puede usar cantidades fraccionarias como 1.5em.
Mike Taverne

Mucho mejor que la respuesta aceptada y muestra una solución genérica a un problema recurrente.
Adam

71

Si está utilizando bootstrap y font-awesome, entonces es fácil, no necesita escribir una sola línea de código nuevo, simplemente agregue fa-Nx, tan grande como desee, vea la demostración

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

¡Glyphicons y Font-Awesome unen fuerzas!
Timo

No estoy a favor de combinar FA y Glyphicons. Vea la respuesta a continuación sobre cómo aumentar el tamaño del glifo usando el estilo en línea o mediante una clase css anterior. O para una solución FA pura, use -> fa fa-globe fa-2x (v4.x)
MarcoZen

MarcoZen: de todos modos, para la próxima versión de bootstrap 4, los Glyphicons serán eliminados, muchos de nosotros antes los estábamos usando juntos.
Ali Adravi

17

Sí, y básicamente también puedes usar el estilo en línea:

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

11

intenta usar el encabezado, no necesitas css extra

<h1 class="glyphicon glyphicon-plus"></h1>

2
Puede hacer esto, pero no le da un buen nivel de control como lo haría un poco de CSS.
MattD

66
El uso de encabezados debido a su efecto en el tamaño de fuente es un antipatrón. Un usuario que navega por su sitio con el teclado se enviaría directamente a su icono, ya que el lector de pantalla supone que significa un título / título para el contenido más importante de la página.
Roy

9

Por ejemplo, agregue clase:

btn-lg - GRANDE

btn-sm - PEQUEÑO

btn-xs - Muy pequeño

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

Enlace de referencia Bootstrap: Glyphicons Bootstrap


77
La pregunta consideraba las imágenes, no las imágenes como botones.
user216661

0

He usado clases de encabezado bootstrap ("h1", "h2", etc.) para esto. De esta forma, obtienes todos los beneficios de estilo sin usar las etiquetas reales. Aquí hay un ejemplo:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.