Cambia el color de los glifos a azul en algunos lugares, pero no en todos, con Bootstrap 2

Respuestas:

275

El icono adoptará el color del valor de la colorpropiedad css de su padre.

Puede agregar esto directamente al estilo:

<span class="glyphicon glyphicon-user" style="color:blue"></span>

O puede agregarlo como una clase a su icono y luego configurar el color de la fuente en CSS

HTML

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-user blue"></span>
<span class="glyphicon glyphicon-trash"></span>

CSS

.blue {
    color: blue;
}

Este violín tiene un ejemplo.

Vikas Ghodke
fuente
66
Gracias. Estoy usando Bootstrap /2.3.2/. No funciona para mí.
Mike Phils
1
Aún así, puede usarlo, eliminar todas las reglas CSS para glyphicon y agregar este archivo CSS netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/… y descargar las fuentes glyphicon de bootstrap 3, esto hará ejercicio.
Vikas Ghodke
3
@VikasGhodke, eso todavía requeriría la migración de todo el proyecto a la versión 3.
Maksim Vi.
194

Simplemente aplique la text-successclase Bootstrap de Twitter en Glyphicon:

<span class="glyphicon glyphicon-play text-success">начал работу</span>

ingrese la descripción de la imagen aquí

Lista completa de colores disponibles: Documentación Bootstrap: Clases de ayuda
(el azul también está presente)

itsnikolay
fuente
2
¿Por qué mezclar naranjas con manzanas? : \
USer22999299
77
* начал работуes started a work. Había escrito la respuesta sobre la marcha y no pensé que se votaría alto. Por lo tanto, la captura de pantalla se realizó en ruso desde mi aplicación anterior para mostrar cómo se veía el marcado.
itsnikolay
3
Me parece muy apropiado si el ícono debe mostrarse exactamente porque ha habido un éxito en la operación.
Terix
66
Esto es mejor porque el color aplicado se ajustará al esquema de color actual del tema Bootstrap
Remus Rusanu
2
@naXa prueba text-danger. Aquí hay una lista completa de colores.
naXa
24

Finalmente encontré la respuesta yo mismo. Para agregar nuevos íconos en el programa de arranque 2.3.2, debemos agregar Font Awsome css en su archivo. Después de hacer esto, podemos anular los estilos con CSS para cambiar el color y el tamaño.

<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

CSS

.brown{color:#9b846b}

Si queremos cambiar el color del ícono, simplemente agregue la clase marrón y el ícono se volverá de color marrón. También proporciona un icono de varios tamaños.

HTML

<p><i class="icon-camera-retro icon-large brown"></i> icon-camera-retro</p> <!--brown class added-->
<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
<p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>
Mike Phils
fuente
2
Las versiones más recientes (4.0.3 en el momento de este comentario) están disponibles en bootstrapcdn.com/#fontawesome_tab
wizulus
7

También puedes hacer esto, espero que ayude

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>
Guven Sezgin Kurt
fuente
7

Para bootstrap 3.0, esto funcionó para mí:

.myclass .glyphicon {color:blue !important;}
charco
fuente
3

Sí, puede configurar los iconos en el color blanco. Así es como funcionó para mí.

Bootstrap <3

HTML

<i class="icon-ok icon-white"></i>

Esto haría que su icono parezca blanco.

AJ
fuente
3
El icon-whitetrabajó para mí con Bootstrap 2. La pregunta para el azul, pero sabiendo que hay una sola clase para el blanco parece práctico.
smholloway
2

Si solo es un icono de arranque. Tenga en cuenta que los iconos están debajo del texto o más bien de la tipografía. Simplemente agregue la clase de color de texto de esta manera. Por ejemplo, text-primary, text-info y así sucesivamente a la clase de ícono:

<i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>
Cuervo blanco
fuente
2

Bootstrap> = v4.0 dejó caer el soporte de glifos

Soltó la fuente del icono Glyphicons. Si necesita iconos, algunas opciones son:

la versión corriente arriba de Glyphicons

Octicones

Font Awesome

Fuente: https://v4-alpha.getbootstrap.com/migration/#components

Si está usando Bootstrap> = v4.0 o más reciente, puede usar las clases de estilo de bootstrap existentes como text-success, text-warningetc.

Por ejemplo, si está utilizando fontawesome:

<i class="fa fa-tag text-danger" aria-hidden="true"></i>
Caner
fuente
2

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

Los glifos se eliminan en 4.0, recomiendo Font-awesome 4 o posterior :)

Michael Jørgensen
fuente
1

Todas las respuestas anteriores son correctas, pero aquí hay una manera simple y rápida si solo necesita un icono en un lugar para cambiar su color:

   <p style="color:green">Time icon: <span class="glyphicon glyphicon-time" ></span></p>  

ingrese la descripción de la imagen aquí

grepit
fuente
0

El color no funciona, si lo usa para la fuente de bootstrap imagen png, como yo.

[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("../img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

HTML5 usa el filtro CSS para colorear la imagen, ejemplo

filter: invert(100%)  contrast(2) brightness(50%) sepia(40%) saturate(450%) hue-rotate(-50deg);
Peter Mlich
fuente