javascript - español - Aumenta el tamaño de los Glyphicons de Bootstrap 2.3
bootstrap tutorial (11)
A partir de Bootstrap 3, los glyphicons se han cambiado a fuentes en lugar de sprites. Esto te da más flexibilidad. Por ejemplo, puede establecer el font-size y continuar.
<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>
O simplemente puedes escribir una clase modificadora:
.glyphicon-2x {
font-size: 48px;
}
¿Hay alguna forma fácil de aumentar el tamaño de los Glificones?
Encontré alguna solución como Font Awesome pero no quiero incluir una nueva biblioteca de CSS solo para aumentar los iconos de tamaño 2.
Acabo de encontrar una manera muy fácil: usar "transformar". Por ejemplo, lugar:
.glyphicon-chevron-right {transform:scale(2.9,2.9);}
en tu CSS para aumentarlo 2.9 veces.
Esta es una forma de aumentar el tamaño de los iconos en Bootstrap 2.3. Como menciono en mi comentario, los resultados serán bastante pobres porque está escalando la imagen de la hoja de sprites.
.test {
background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
width: 90px;
height: 90px;
background-size: 2100px 800px;
}
Considera Fontello en Fontello lugar. Le permiten generar una fuente personalizada en función de los iconos que elija.
Establecer el tamaño de fuente de la etiqueta <span> funcionó para mí
<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>
Puede anular la clase de arranque, por ejemplo:
// Size and position are not working.
.icon-glass {
background-size: 800px;
backgroung-position: 10px 50px;
width: 24px;
height: 24px;
}
El problema es que los iconos se verán feos debido a la resolución.
¡Espero que esto ayude!
Puede utilizar icomoon.io una icomoon.io muy fácil de usar para generar fuentes de iconos de diferentes colores, tamaños e incluso puede generar sprites de su selección.
Puedes usar:
.icon-whatever {
zoom: 2;
-moz-transform: scale(2); /* Firefox */
}
Sin embargo, se verá más borroso cuanto más grande vaya, ya que está escalando la imagen. Una biblioteca de íconos de fuentes escalará mucho mejor.
Si está usando Bootstrap 3, ¿por qué no usa anchos de em en el ícono? Si los íconos están incrustados dentro de los encabezados / párrafos / cuerpos, etc., el uso de un tamaño de letra en las letras aumentará el tamaño de los iconos en relación con el párrafo en el que se encuentran.
Por ejemplo, si tiene:
<span class="glyphicon glyphicon-adjust"></span>
En el css que personaliza tu bootstrap, simplemente agrega:
.glyphicon {font-size: 1.25 em;}
Esto escalará los glifos.
Si usas los glifos para los botones, es bastante simple:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star"></span>
</button>
El btn-lg define el tamaño. Puede usar btn-lg, bnt-sm, btn-sx
Editar: si no usa botones o lg no es lo suficientemente grande, puede agregar una clase propia y usar el tamaño de fuente (solo probado en el programa de arranque 3.0). En bootstrap 3.0 los glyphicons existen como .svg para que no se vean feos
Ejemplo:
<button type="button" class="btn btn-default btn-lg myGlyphicon">
<span class="glyphicon glyphicon-star"></span>
</button>
CSS:
.myGlyphicon {font-size: 120%;}
o
.myGlyphicon {font-size: 70px;}
Solo necesita configurar el tamaño de fuente :) Tiene más de una opción para hacer esto:
Primero (ajústelo directamente al elemento)
<span class="glyphicon glyphicon-search" style="font-size:30px"></span>
Segundo (configurarlo en un archivo css)
.glyphicon{
font-size: 30px;
}
Tercero (construir modificar clases) [prefiero esta posibilidad]
.glyphicon-2x{
font-size: 40px;
}
.glyphicon-3x{
font-size: 60px;
}
...
Uso:
<span class="glyphicon glyphicon-2x glyphicon-search"></span>
hay más opciones para obtener el tercero más pequeño. allí deberías leer más acerca de Less
De acuerdo con su pregunta y el comentario que Brandon me dio, puede usar lo anterior con otro icono contianer.
Bootstrap 2.3
primero
<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>
Segundo
.icon-search{
-webkit-transform:scale(1.8);
-moz-transform:scale(1.8);
-o-transform:scale(1.8);
}
Tercero
.icon-x2{
-webkit-transform:scale(2.0);
-moz-transform:scale(2.0);
-o-transform:scale(2.0);
}
.icon-x3{
-webkit-transform:scale(3.0);
-moz-transform:scale(3.0);
-o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>