Changez la couleur des glyphicons en bleu à certains endroits mais pas à tous en utilisant Bootstrap 2

J'utilise le framework Bootstrap pour mon interface utilisateur. Je veux changer la couleur de mes glyphicons en bleu, mais pas partout. Dans certains endroits, il devrait utiliser la couleur par défaut.

J'ai évoqué ces deux liens, mais je ne trouve rien d'utile.

• Puis-je ajouter de la couleur aux icônes d'amorçage uniquement en utilisant CSS?
• Comment changer les glyphicons de Bootstrap 3 en blanc?

Remarque: j'utilise Bootstrap 2.3.2 .

L'icône adoptera la couleur de la valeur de la colorpropriété css de son parent.

Vous pouvez soit l'ajouter directement au style:

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

Ou vous pouvez l'ajouter en tant que classe à votre icône, puis définir la couleur de la police dans 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;
}

Ce violon a un exemple.

Appliquez simplement la text-successclasse Twitter Bootstrap sur Glyphicon:

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

Liste complète des couleurs disponibles: Documentation Bootstrap: Classes d'assistance
(le bleu est également présent)

Enfin j'ai trouvé la réponse moi-même. Pour ajouter de nouvelles icônes dans le bootstrap 2.3.2, nous devons ajouter Font Awsome css dans votre fichier. Après cela, nous pouvons remplacer les styles avec css pour changer 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, ajoutez simplement une classe brune et l'icône deviendra brune. Il fournit également des icônes de différentes tailles.

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>

Vous pouvez le faire aussi, j'espère que cela vous aidera

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

Pour bootstrap 3.0, cela a fonctionné pour moi:

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

Oui, vous pouvez définir les icônes sur la couleur blanche. voici comment cela a fonctionné pour moi.

Bootstrap <3

HTML

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

Cela ferait apparaître votre icône en blanc.

J'ai créé une bibliothèque de couleurs alternatives pour bootstrap 2.3.2, elle est disponible et simple à utiliser pour toute personne intéressée par plus de couleurs pour l'ancienne bibliothèque de glyphicons.

S'il ne s'agit que d'une icône de bootstrap. Notez que les icônes sont sous le texte ou plutôt sous la typographie. Ajoutez simplement la classe de couleur de texte comme ceci. Par exemple, text-primary, text-info et ainsi de suite à la classe d'icônes:

<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 a abandonné le support de glyphicon

Suppression de la police d'icônes Glyphicons. Si vous avez besoin d'icônes, certaines options sont:

la version amont de Glyphicons

Octicons

Police géniale

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

Si vous utilisez Bootstrap> = v4.0 ou plus récent, vous pouvez utiliser les classes de style existantes de bootstrap telles que text-success, text-warningetc.

Par exemple, si vous utilisez 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>

Les glyphicons sont supprimés dans la version 4.0, je recommande Font-awesome 4 ou plus récent :)

Toutes les réponses précédentes sont correctes mais voici un moyen simple et rapide si vous n'avez besoin que d'une icône au même endroit pour changer sa couleur:

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

La couleur ne fonctionne pas, si vous utilisez pour l'image png de la police bootstrap, comme i.

[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 utilise un filtre css pour coloriser l'image, exemple

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