Hay una manera fácil de aumentar el tamaño de Glyphicons?

He encontrado algunas soluciones como Fuente Impresionante pero no desea incluir CSS nuevo de la biblioteca sólo para aumentar el tamaño de 2 iconos.

11 Comentarios

  1. 10

    Esta es una manera de aumentar el tamaño de los iconos en Bootstrap 2.3. Como me nota en mi comentario, los resultados serán muy pobres porque son la ampliación de la spritesheet imagen.

    JSFiddle demo

    .test {
        background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
        width: 90px;
        height: 90px;
        background-size: 2100px 800px;
    }

    Considerar Fontello lugar. Que permiten generar una fuente personalizada basada en los iconos que usted elija.

    • Así que la solución «no quiero incluir otro CSS biblioteca» es «incluir otro CSS»de la biblioteca?
    • No. Sí, el Tamaño de Glyphicons puede ser aumentado pero que resultará en muy mal iconos como el Bootstrap utiliza este Sprite para la generación de iconos.
    • Mientras que el OP del requisito podría ser tonto, esta respuesta todavía va en contra de ella. (También, una mejor opción sería subconjunto de Fuente Impresionante en sí mismo, ya que es compatible con Bootstrap, aunque el sitio que hace que parece estar abajo.)
    • icomoon.io es mejor. Te permite hacer lo que Fontello hace, con las ventajas añadidas de la importación y la modificación de sus propios iconos personalizados.
    • fontello ya soporta svg importaciones. Y es la interfaz le permite ver immediataly, cómo ícono se ve cerca de texto. Que conveniente, el momento de recoger los iconos de estilo adecuado.
  2. 71

    Configuración de la fuente-tamaño de la <span> etiqueta trabajado para mí

    <span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>
    • Esta debe ser la manera de hacerlo ?
    • Este o Umur del post debe ser marcado como la respuesta..
    • obras. jade código: span(style="font-size:24px").glyphicon.glyphicon-info-sign
    • Nota, OP pregunta acerca de bootstrap 2.3 Esta solución se aplica a bootstrap 3+, el cual se utiliza una fuente en lugar de spritesheet. Editado el post para reflejar eso.
    • Esto se aplica para el bootstrap 3
    • Impresionante, fácil y sencillo!

  3. 32

    Como de Bootstrap 3, glyphicons han cambiado en las fuentes, en lugar de sprites. Esto le da más flexibilidad. Por ejemplo, usted puede establecer la font-size y seguir adelante.

    <span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>

    O usted puede simplemente escribir un modificador de clase:

    .glyphicon-2x {
        font-size: 48px;
    }
  4. 17

    Sólo hay que configurar la fontsize hasta 🙂
    Usted tiene más de una opción para hacer esto:

    Primera (enderezar el elemento)

    <span class="glyphicon glyphicon-search" style="font-size:30px"></span>

    Segundo (ponerlo en un archivo css)

    .glyphicon{
        font-size: 30px; 
    }

    Tercer (construir modificar-clases) [yo 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 conseguir el tercero más pequeño. allí usted debe leer más acerca de
    Menos

    de acuerdo a su pregunta y el comentario de que brandon me dio, usted puede usar la anterior con otro icono contianer.

    Bootstrap 2.3

    Primera

    <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);
    }

    Tercer

    .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>
    • Esto es para Bootstrap 3, tenga en cuenta que el original de la pregunta acerca de la versión 2.3.
    • en realidad es el mismo… la única diferencia es el contenedor de icono… pero para que los enfermos de actualización de mi post para que no haya confusión
    • El aumento de font-size con bootstrap 2.3 no aparece para cambiar el tamaño del icono jsfiddle.net/Lk5vd
    • oh, tienes razón 😀 lo siento… puede que el uso de la escala, pero este tipo de hacer una desagradable resultado 😀
  5. 4

    Puede utilizar:

    .icon-whatever {
        zoom: 2;
        -moz-transform: scale(2);  /* Firefox */
    }

    Pero, se ve borrosa la más grande de ir, como es la escala de la imagen de arriba. Una fuente icono de la biblioteca de la escala mucho mejor.

    • Esto funcionó para mí. Para IE10 : transform: scale(2, 2);
  6. 2

    Puede reemplazar bootstrap de la clase, 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 ven feos debido a la resolución.

    Espero que esto ayude!

    • No. Que se muestran los iconos que se incluyen en el sprite.
    • Estás en lo correcto. Ahora que lo veo.
  7. 2

    Si utiliza el glyphicons 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. Usted puede utilizar btn-lg, bnt-sm, btn-sx

    Editar:
    Si no utiliza botones o lg no es lo suficientemente grande, puede agregar una clase propia y el uso de la fuente-tamaño (probado solo en bootstrap 3.0). En bootstrap 3.0 glyphicons existir como .svg, de modo que no se ven 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;}
  8. 2

    Puede utilizar IcoMoon.io
    un muy fácil utilizar la herramienta para la generación de icono de fuente de diferentes colores ,tamaño e incluso puede generar sprites de la selección.

  9. 1

    Acabo de encontrar de una manera muy fácil—uso de «transformar». Por ejemplo, lugar:

    .glyphicon-chevron-right {transform:scale(2.9,2.9);}

    en tu CSS para aumentar 2,9 veces.

  10. 1

    Si usted está usando Bootstrap 3, ¿por qué no utilizar em anchos en el icono? Si los iconos están incrustados dentro de los encabezados/apartados/órganos etc. a continuación, utilizando un tamaño de fuente en ems aumentar el tamaño de los iconos relativo al párrafo que están en.

    Por ejemplo, si usted tiene:

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

    En el css que personaliza su arranque, simplemente añadir:

    .glyphicon {font-size: 1.25 em;}

    Esta escala los glifos.

    • La pregunta es (probablemente) sobre Bootstrap 2.3, que todavía se utiliza sprites en lugar de las fuentes. El OP debería haber mencionado que, a pesar de que.
  11. 0

    Trate, incluyendo la clase lead

    <span class="glyphicon glyphicon-home lead"></span>

    Aumentar el tamaño de Bootstrap 2.3 del Glyphicons

    O rap en el interior de una <h4> etiqueta

Dejar respuesta

Please enter your comment!
Please enter your name here