web-dev-qa-db-fra.com

Changez la couleur des glyphicons en bleu dans certains endroits mais pas dans tous les endroits avec Bootstrap 2

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

J'ai fait référence à ces deux liens, mais je ne trouve rien d'utile.

Veuillez noter que j'utilise Bootstrap 2.3.2.

htmlcsstwitter-bootstrap-2
141
Mike Phils

Enfin j'ai trouvé répondre moi-même. Pour ajouter de nouvelles icônes dans l'amorçage 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 la classe brune et l'icône deviendra brune. Il fournit également une icône 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>
23
Mike Phils

L'icône adoptera la couleur à partir de la valeur de la propriété color css de son parent.

Vous pouvez soit ajouter ceci 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 lui définir la couleur de la police 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;
}

Ce violon a un exemple.

263
Vikas Ghodke

Appliquez simplement Twitter Bootstrap text-success class sur Glyphicon:

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

enter image description here

Liste complète des couleurs disponibles: Documentation Bootstrap: Helper classes
(Le bleu est présent aussi)

174
itsnikolay

Pour bootstrap 3.0, cela fonctionnait pour moi:

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

Vous pouvez le faire aussi, Hopeit aide

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

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.

3
Clayton

J'ai créé une bibliothèque alternative colors 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 glyphicons.

3
Eric Uldall

S'il ne s'agit que d'une icône d'amorçage. Notez que les icônes sont sous texte ou plutôt typographie. Ajoutez simplement la classe de couleur du texte comme ceci. E.g text-primary, text-info et ainsi de suite jusqu'à 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>
2
White.Raven

CSS:

.blue-icon{
color:blue !important;
}

HTML

<i class="fa fa-wrench blue-icon"></i>

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

1
Michael Jørgensen

Bootstrap> = v4.0 abandonné la prise en charge de glyphicon

Laissé tomber la police d'icône de glyphicons. Si vous avez besoin d'icônes, voici quelques options:

la version amont de Glyphicons

Octicons

Font Awesome

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 d'amorçage existantes telles que text-success, text-warning etc.

Par exemple, si vous utilisez fontawesome:

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

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 à un endroit pour en changer la couleur:

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

 enter image description here

0
grepit

La couleur ne fonctionne pas, si vous utilisez pour bootstrap police png, 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 le filtre CSS pour coloriser l'image, exemple

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