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

157

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.

Remarque: j'utilise Bootstrap 2.3.2 .

Mike Phils
la source

Réponses:

275

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.

Vikas Ghodke
la source
6
Merci. J'utilise Bootstrap /2.3.2/, cela ne fonctionne pas pour moi.
Mike Phils
1
Vous pouvez toujours l'utiliser, supprimer toutes les règles css pour glyphicon et ajouter ce fichier css netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/… et télécharger les polices glyphicon de bootstrap 3, cela fonctionnera.
Vikas Ghodke
3
@VikasGhodke, cela nécessiterait toujours la migration de l'ensemble du projet vers la version 3.
Maksim Vi.
194

Appliquez simplement la text-successclasse Twitter Bootstrap sur Glyphicon:

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

entrez la description de l'image ici

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

Itsnikolay
la source
2
pourquoi mélanger des oranges avec des pommes? : \
USer22999299
7
* начал работуest started a work. J'écrivais la réponse à la volée et je ne pensais pas qu'elle serait votée haut. Ainsi, la capture d'écran a été réalisée en russe à partir de mon application précédente pour montrer à quoi ressemblait le balisage.
itsnikolay
3
Je trouve très approprié que l'icône soit affichée de manière précise car l'opération a réussi.
Terix
6
C'est mieux car la couleur appliquée sera conforme au schéma de couleurs actuel du thème Bootstrap
Remus Rusanu
2
@naXa essayez text-danger. Voici une liste complète des couleurs.
naXa
24

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>
Mike Phils
la source
2
Des versions plus récentes (4.0.3 au moment de ce commentaire) sont disponibles sur bootstrapcdn.com/#fontawesome_tab
wizulus
7

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

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

Pour bootstrap 3.0, cela a fonctionné pour moi:

.myclass .glyphicon {color:blue !important;}
flaque d'eau
la source
3

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.

UN J
la source
3
Cela a icon-whitefonctionné pour moi avec Bootstrap 2. La question posée pour le bleu, mais sachant qu'il n'y a qu'une seule classe pour le blanc semble pratique.
smholloway
2

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>
Blanc Corbeau
la source
2

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>
Caner
la source
2

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

Michael Jørgensen
la source
1

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>  

entrez la description de l'image ici

grepit
la source
0

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);
Peter Mlich
la source