Changez la couleur des glyphicons en bleu dans certains endroits mais pas dans tous les endroits à l’aide de Bootstrap 2

Question

Je suis en utilisant le Bootstrap cadre de mon INTERFACE. Je veux changer la couleur de mon glyphicons en bleu, mais pas dans tous les lieux. Dans certains endroits, il doit utiliser la couleur par défaut.

J'ai parlé de ces deux liens, mais je ne parviens pas à trouver quelque chose d'utile.

• Puis-je ajouter de la couleur à l'amorçage uniquement des icônes à l'aide de CSS?
• Comment puis-je changer de Bootstrap 3 glyphicons à blanc?

Note: je suis en utilisant Bootstrap 2.3.2.

Answer 1

Ajoutez une classe à votre icône, puis définissez la couleur de la police.

VÉRIFIER CE FIDDLE

HTML

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

CSS

 .blue {
    color: blue;
}
 

Answer 2

Bootstrap 3 text-success class pourrait être utile

 <span class="glyphicon glyphicon-play text-success"></span>
 

Il y a plus de couleurs: Documentation Bootstrap: Helper classes
La couleur bleue est également présente.

Answer 3

Finalement, j'ai trouvé la réponse moi-même. Pour ajouter de nouvelles icônes dans bootstrap 2.3.2, nous devons ajouter de la Police Géniale css dans vous fichier. Après avoir fait cela, nous pouvons remplacer les styles css pour modifier la couleur et la taille.

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

CSS

.brown{color:#9b846b}

Si nous voulons changer la couleur de l'icône puis juste ajouter la cassonade classe et icône va se transformer en couleur marron. Il a également fournir une icône de tailles diverses.

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 4

Vous pouvez le faire aussi, Hopeit aide

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

Answer 5

J'ai créé une bibliothèque de couleurs alternatives pour bootstrap 2.3.2. Il est disponible et simple à utiliser pour les personnes intéressées par davantage de couleurs pour l'ancienne bibliothèque de glyphicons.

http://www.devlifeline.com/2013/09/twitter-bootstrap-glyphicons-extended.html