¿Puedo agregar color a los icons de arranque solo con CSS?

El bootstrap de Twitter usa Icons by Glyphicons . Están ” available in dark gray and white ” por defecto:

Picture-58.png

¿Es posible usar algunos trucos de CSS para cambiar los colores de los íconos? Esperaba algún otro brillo css3 que evitara tener que tener una imagen de icono para cada color.

Sé que puedes cambiar el color de fondo del elemento adjunto ( ), pero estoy hablando del color de primer plano del icono. Supongo que sería posible invertir la transparencia en la imagen del icono y luego establecer el color de fondo.

Entonces, ¿puedo agregar color a los íconos de arranque solo usando CSS?

Sí, si usas Font Awesome con Bootstrap. Los íconos son ligeramente diferentes, pero hay más, se ven geniales en cualquier tamaño y puedes cambiar los colores de los mismos.

Básicamente, los íconos son fonts y puedes cambiar el color de ellas solo con la propiedad de color CSS. Las instrucciones de integración se encuentran en la parte inferior de la página en el enlace provisto.


Editar: ¡Los icons de Bootstrap 3.0.0 ahora son fonts!

Como algunas otras personas también han mencionado con el lanzamiento de Bootstrap 3.0.0, los glifos de íconos predeterminados ahora son fonts como Font Awesome, y el color se puede cambiar simplemente cambiando la propiedad CSS de color . Cambiar el tamaño se puede hacer a través font-size propiedad de font-size .

Con la última versión de Bootstrap RC 3, cambiar el color de los icons es tan simple como agregar una clase con el color que desea y agregarlo al tramo.

Color negro predeterminado:

 

Password Changed

se convertiría

 

Password Changed

CSS

 .icon-success { color: #5CB85C; } 

Bootstrap 3 Lista de Glifos

Debido a que los glyphicons ahora son fonts, se pueden usar las clases contextuales para aplicar el color apropiado a los íconos.

Por ejemplo: agregar text-info al CSS hará que el ícono sea de color azul.

Otra forma posible de tener icons de bootstrap en un color diferente es crear un nuevo .png en el color deseado (por ejemplo, magenta) y guardarlo como / ruta-a-bootstrap-css / img / glyphicons-halflings-magenta.png

En tus variables.less encuentra

 // Sprite icons path // ------------------------- @iconSpritePath: "../img/glyphicons-halflings.png"; @iconWhiteSpritePath: "../img/glyphicons-halflings-white.png"; 

y agrega esta línea

 @iconMagentaSpritePath: "../img/glyphicons-halflings-magenta.png"; 

En tus sprites . Sin agregar

 /* Magenta icons with optional class, or on hover/active states of certain elements */ .icon-magenta, .nav-pills > .active > a > [class^="icon-"], .nav-pills > .active > a > [class*=" icon-"], .nav-list > .active > a > [class^="icon-"], .nav-list > .active > a > [class*=" icon-"], .navbar-inverse .nav > .active > a > [class^="icon-"], .navbar-inverse .nav > .active > a > [class*=" icon-"], .dropdown-menu > li > a:hover > [class^="icon-"], .dropdown-menu > li > a:hover > [class*=" icon-"], .dropdown-menu > .active > a > [class^="icon-"], .dropdown-menu > .active > a > [class*=" icon-"], .dropdown-submenu:hover > a > [class^="icon-"], .dropdown-submenu:hover > a > [class*=" icon-"] { background-image: url("@{iconMagentaSpritePath}"); } 

Y úsalo así:

  

Espero que ayude a alguien.

Trabajo rápido y sucio alrededor del cual lo hice por mí, sin colorear el icono, pero rodeándolo con una etiqueta o insignia del color que desea;

   

Los Bootstrap Glyphicons son fonts. Esto significa que se puede cambiar como cualquier otro texto a través del estilo de CSS.

CSS:

  

HTML:

  

Ejemplo:

    Glyphicon Colors        

Mira el curso Up and Running con Bootstrap 3 de Jen Kramer, o mira la lección individual sobre la anulación de CSS central con estilos personalizados .

Esto es todo un poco indirecto ..

He usado glifos como este

   

y para afectar el color, incluí un poco de CSS en la cabeza como este

  

Voila, pulgares verdes y rojos.

También funciona con la etiqueta de estilo:

   

enter image description here

En realidad es muy fácil:

Solo usa:

 .icon-name{ color: #0C0;} 

Por ejemplo:

 .icon-compass{ color: #C30;} 

Eso es.

Usa la propiedad de la mask-image la mask-image , pero es un poco complicado. Está demostrado en el blog de Safari aquí .

También se describe en profundidad aquí .

Básicamente crearías un cuadro CSS, con una background-image: gradient(foo); y luego aplicarle una máscara de imagen basada en esas imágenes PNG.

Ahorraría tiempo de desarrollo haciendo imágenes individuales en Photoshop, pero no creo que ahorre mucho ancho de banda a menos que muestre las imágenes en una amplia variedad de colores. Personalmente, no lo usaría porque necesitas ajustar tu marcado para usar la técnica de manera efectiva, pero soy miembro de la escuela de pensamiento “la pureza es imperiosa”.

La respuesta aceptada (usando font awesome) es la correcta. Pero como solo quería que la variante roja se mostrara en los errores de validación, terminé usando un paquete de complementos, amablemente ofrecido en este sitio .

Acabo de editar las rutas url en archivos css ya que son absolutas (empiezo por /) y prefiero ser relativo. Me gusta esto:

 .icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;} .icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;} .icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;} .icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;} .icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;} .icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;} .icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;} 

Puedes cambiar el color globalmente también

es decir

  .glyphicon { color: #008cba; } 

Pensé que podría agregar este fragmento a esta publicación anterior. Esto es lo que hice en el pasado, antes de que los íconos fueran fonts: