¿Puedo agregar color a los iconos de bootstrap solo con CSS?

159

El programa de arranque de Twitter usa iconos de Glyphicons . Son " available in dark gray and white" por defecto:

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

Sé que puedes cambiar el color de fondo del cerramiento ( elemento ), 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 iconos de bootstrap solo con CSS?

— cwd
fuente

No lo creo ... Pero probablemente podría hacerlo con JavaScript y un elemento de lienzo.

— bfavaretto

@bfavaretto: ¿puedes dar más detalles? ¿te refieres a crear código / coordenadas para dibujar cada uno de los iconos o usar la imagen png existente de alguna manera?

— cwd

1

Lo sentimos, no tengo suficiente experiencia con el elemento de lienzo para sugerirle código, pero sé que puede manipular los píxeles individualmente con un lienzo.

— bfavaretto

189

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

Básicamente, los íconos son fuentes y puede cambiar el color de ellos 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 proporcionado.

Editar: ¡Los iconos de Bootstrap 3.0.0 ahora son fuentes!

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

— hajpoj
fuente

9

Ahh, listo! No olvide configurar cursor: default;para que los usuarios no vean el I-Bar. Además, echa un vistazo a FF Chartwell, una fuente realmente inteligente: tktype.com/chartwell.php

— Dai

44

Cuando pasa el mouse sobre el texto (como en un procesador de texto), el cursor se ve como un " I" carácter mayúscula mayúscula , se usa para seleccionar texto. En CSS se conoce como cursor: text;. También se conoce como "I-beam".

— Dai

38

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

Color negro predeterminado:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

se convertiría

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

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

Bootstrap 3 Lista de glifos

— fseminario
fuente

17

Debido a que los glificones ahora son fuentes, uno puede usar las clases contextuales para aplicar el color apropiado a los iconos.

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

— truncie
fuente

Gracias estaba buscando una manera de aplicar las clases contextuales. Cualquiera de las clases contextuales text- * funcionará

— Dustin Hodges

14

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

En sus variables.less encontrar

// 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.less 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í:

<i class='icon-chevron-down icon-magenta'></i>

Espero que ayude a alguien.

— Sepp Ludger
fuente

55

solo quería reiterarI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color

— cwd

No se puede hacer únicamente a través de CSS que también sea compatible con varios navegadores. Por lo general, las personas necesitan un esquema de color con iconos relacionados, por lo que diría que hasta 5 conjuntos de colores no es un gran desafío.

— foxybagga

@seppludger ¿Cómo se crea un nuevo sprite halfling de color? ¿Has logrado hacer esto? No puedo cambiar los colores si los cargo en cualquier editor de gráficos.

— Norman

7

Trabajo rápido y sucio que lo hizo por mí, no coloreando el ícono, sino rodeándolo con una etiqueta o insignia del color que desee;

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>

— frbl
fuente

Su respuesta fue útil, + 1.Quería usar el icono de edición y quiero poner el color amarillo. ¿Me puede decir cómo hacerlo?

Bueno, podrías cambiar el ícono-ok a otra cosa; por ejemplo, icon-white"> . Por ejemplo: . Es mejor

— optar

6

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

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

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

Ejemplo:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>

Vea el curso Up and Running with Bootstrap 3 de Jen Kramer, o vea la lección individual sobre Overriding core CSS con estilos personalizados .

— Eugene
fuente

4

Todo esto es un poco indirecto.

He usado los glifos como este

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

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

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

Voila, pulgares verdes y rojos.

— Monstruos X
fuente

4

También funciona con la etiqueta de estilo:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

ingrese la descripción de la imagen aquí

— joan16v
fuente

3

En realidad es muy fácil:

Solo usa:

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

Por ejemplo:

.icon-compass{
color: #C30;}

Eso es.

— Aniruddh Dixit
fuente

3

Usa la mask-imagepropiedad, pero es un poco hack. Se demuestra en el blog de Safari aquí .

También se describe en profundidad aquí .

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

Le 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 necesita ajustar su marcado para usar la técnica de manera efectiva, pero soy miembro de la escuela de pensamiento "la pureza es imperitiva".

— Dai
fuente

1

Tenga en cuenta que el apoyo a la mask-imagepropiedad no es tan bueno .

— Scott Bartell

1

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 de URL en archivos CSS ya que son absolutas (comienzan con /) y prefiero ser relativas. 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;}

— mppfiles
fuente

Finalmente, el compatible con las versiones anteriores de Bootstrap

— Dmitry Ginzburg

1

También puedes cambiar el color globalmente

es decir

 .glyphicon {
       color: #008cba; 
   }

— Desarrollador
fuente

1

Simplemente use los GLYPHICONS y podrá cambiar el color simplemente configurando el CSS:

#myglyphcustom {
    color:#F00;
}

— Valter Lorran
fuente

0

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

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

Esto es muy similar a la respuesta furtiva de @frbl, sin embargo, no utiliza otra imagen. En cambio, esto establece el color de fondo del elemento whitey utiliza la propiedad CSS border-radiuspara hacer que todo el elemento sea "redondeado". Si se dio cuenta, el valor de border-radius(7.5px) es exactamente la mitad que el de la propiedad widthy height(ambos 15px, haciendo que el icono sea cuadrado), haciendo que el elemento sea circular.

— WebWanderer
fuente