css - examples - glyphicon size

Twitter Bootstrap-Haciendo los iconos CSS más grandes

Question

Estoy usando Twitter Bootstrap y dice que use <i class="icon-flag"></i> si quiero usar un icono de su sprite CSS.

¿Cómo puedo agregar mi propia clase de css llamada .logo-icon que tomará uno de sus íconos pero lo hará más grande?

Mi clase actualmente se ve como:

.logo-icon {
    background-image: url("../img/glyphicons-halflings-white.png");
    background-position: -312px -24px;
}

Answer 1

mejor y mas facil

es cambiar el tamaño de fuente de la etiqueta span

span.glyphicon {
    font-size: 8px;  
}

o

<span class="glyphicon glyphicon-check" style="font-size: 1.2em"></span>

utilizando FontAwesome?

Y si, como yo, también usas FontAwesome, podrías ir híbrido ;) usar estas clases

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

Answer 2

¿Qué pasa si usas la escala ()?

.logo-icon {
    transform:scale(2.0,2.0);
    -ms-transform:scale(2.0,2.0); /* IE 9 */
    -moz-transform:scale(2.0,2.0); /* Firefox */
    -webkit-transform:scale(2.0,2.0); /* Safari and Chrome */
    -o-transform:scale(2.0,2.0); /* Opera */
}

¿No es más fácil de usar y mantener? Puede escalar a cualquier tamaño que desee sin volver a calcular el tamaño y la posición del fondo.

Estoy usando esto para reducir el tamaño de los iconos en algunas partes de mi sistema. Pasé alrededor de 1 hora buscando una solución para reducir y casi me olvidé de la escala (). Entonces, solo compartir para ayudar a otros. = D

Pero, por supuesto, si los hace más grandes, no obtendrá un ícono de apariencia perfecta.

Answer 3

No se verá tan bien como usar FontAwesome (que es una fuente real), pero puede escalar glyphicons usando la propiedad de tamaño de fondo . Esto también implicará escalar todos los demás valores por un factor idéntico, lo que significa que no puede hacer esto en general, sino que tendrá que hacerlo para un solo icono a la vez.

Ejemplo, duplicar el icono de la bandera sería:

.icon-flag.logo-icon {
  width: 28px;  // 14px * 2
  height: 28px; // 14px * 2
  background-size: 938px 318px;  // original dimensions * 2
  background-position: -624px -48px;  // original position * 2
}

Si desea hacer esto con íconos arbitrarios, sería mejor que trabaje con MENOS, donde probablemente podría generar esto programáticamente. Personalmente, creo que cambiar a FontAwesome es la mejor alternativa.

Answer 4

Prefiero simplemente cambiar el tamaño de fuente:

.large-icon {
  padding: 11px 15px;
  font-size: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}