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

Estoy usando el marco Bootstrap para mi interfaz de usuario. Quiero cambiar el color de mis glifos a azul, pero no en todos los lugares. En algunos lugares, debe usar el color predeterminado.

Me he referido a estos dos enlaces, pero no encuentro nada útil.

• ¿Puedo agregar color a los iconos de bootstrap solo con CSS?
• ¿Cómo cambio los glificones de Bootstrap 3 a blanco?

Nota: estoy usando Bootstrap 2.3.2 .

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.

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

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

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

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>

También puedes hacer esto, espero que ayude

<span style="color:black"><i class="glyphicon glyphicon-music"></i></span>

Para bootstrap 3.0, esto funcionó para mí:

.myclass .glyphicon {color:blue !important;}

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.

Creé una biblioteca de colores alternativos para bootstrap 2.3.2 que está disponible y es fácil de usar para cualquier persona interesada en más colores para la antigua biblioteca de glifos.

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>

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>

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 :)

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>  

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