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

239

Me gustaría agrandar el glifo de globo para que cubra una gran parte de la página (es una imagen vectorial). No está en un botón ni nada; Es solo. ¿Hay alguna forma de hacer esto?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>
html css twitter-bootstrap glyphicons CodificadorBryan
fuente
Posible duplicado de Bigly Glyphicons
Kevin Workman

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;
}
VenomVendor
fuente
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>
Mr Crowley
fuente
¡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>
Ali Adravi
fuente
¡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>
Terje Solem
fuente
11

intenta usar el encabezado, no necesitas css extra

<h1 class="glyphicon glyphicon-plus"></h1>
Bagus Cahyono
fuente
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

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

Alex Kozlov
fuente