html - color - ¿Cómo hago Glyphicons más grande?(¿Cambiar tamaño?)

glyphicon list

Question

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

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

Answer 1

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

.glyphicon {
font-size: 50px;
}

Para apuntar a un solo icono,

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

Answer 2

Fontawesome tiene una solución perfecta para esto.

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

Answer 3

He usado clases de encabezado bootstrap ("h1", "h2", etc.) para esto. De esta manera usted obtiene 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>

Answer 4

Por ej .. agregar 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>

Ref link Bootstrap: Glyphicons Bootstrap

Answer 5

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

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

Answer 6

Si está usando bootstrap y font-awesome, entonces es fácil, no es necesario escribir una sola línea de código nuevo, solo agregue fa-Nx, si es lo que desea, 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>

Answer 7

Trate de usar el encabezado, no necesita css extra

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