html - style - Cambie el color de los glificones al azul en algunos lugares, pero no en todos, con Bootstrap 2

style font html

Question

Estoy usando el marco Bootstrap para mi UI. Quiero cambiar el color de mis glyphicons al 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 arranque solo con CSS?
• ¿Cómo cambio los glificones de Bootstrap 3 a blanco?

Tenga en cuenta: Estoy usando Bootstrap 2.3.2 .

Answer 1

Bootstrap> = v4.0 dejó caer soporte de glyphicon

Se cayó la fuente del icono de Glyphicons. Si necesita iconos, algunas opciones son:

la versión upstream de Glyphicons

Octicons

Fuente impresionante

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

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

Por ejemplo, si está usando fontawesome:

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

Answer 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 más reciente :)

Answer 3

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

Answer 4

Finalmente encontré la respuesta a mí mismo. Para agregar nuevos íconos en el arranque 2.3.2 tenemos que 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 agrega la clase marrón y el ícono cambiará a 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>

Answer 5

Para bootstrap 3.0, esto funcionó para mí:

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

Answer 6

Puedes hacer esto también, espero que ayude

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

Answer 7

Sí, puede configurar los iconos al color blanco. así es como funcionó para mí.

Bootstrap <3

HTML

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

Esto haría que tu ícono aparezca en blanco.

Answer 8

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

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

Answer 9

simplemente aplique la clase de text-success Bootstrap 3 en el ícono:

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

Hay más colores: documentación de Bootstrap: clases de ayuda
(El azul también está presente)

Answer 10

El icono adoptará el color del valor de la propiedad css de color 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 establecer 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.