Changer la couleur de glyphicons vers le bleu, dans certains mais pas à tous les endroits à l'aide de Bootstrap 2

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.

Note: je suis en utilisant Bootstrap 2.3.2.

InformationsquelleAutor Mike Phils | 2013-08-20
  1. 269

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

    Vous pouvez ajouter directement à la style:

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

    Ou vous pouvez l'ajouter en tant que classe à votre icône et ensuite définir la couleur de 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.

    • Merci. Je suis en utilisant Bootstrap /2.3.2/.Il n'est pas de travail pour moi.
    • Encore, vous pouvez 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 le glyphicon polices de bootstrap 3, ce sera séance d'entraînement.
    • qui aurait encore besoin de la migration de l'ensemble du projet à la version 3.
    • simple et clair... Merci @Vikas
    InformationsquelleAutor Vikas Ghodke
  2. 177

    Il suffit d'appliquer Twitter Bootstrap
    text-success classe sur Glyphicon:

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

    Changer la couleur de glyphicons vers le bleu, dans certains mais pas à tous les endroits à l'aide de Bootstrap 2

    Liste complète de couleurs disponibles: Bootstrap, Documentation: classes d'assistance

    (Le bleu est présent aussi)

    • pourquoi mélanger les oranges avec des pommes? :\
    • * начал работу est started a work. J'avais écrit la réponse sur la mouche et je n'ai pas pensé qu'il serait voté élevé. Ainsi, la capture d'écran a été faite en russe à partir de mon application précédente pour montrer comment le balisage regardé.
    • Je trouve qu'il est très approprié si l'icône doit être montré exactement car il y a eu une réussite de l'opération.
    • C'est mieux parce que la couleur appliqués seront conformes au courant de Bootstrap thème de couleurs
    • ce qui est text-? classe d'erreur?
    • essayez text-danger. Voici un liste complète des couleurs.
    • ty! J'ai corrigé le lien!

    InformationsquelleAutor itsnikolay
  3. 24

    Enfin j'ai trouvé la réponse moi-même. Pour ajouter de nouvelles icônes dans bootstrap 2.3.2, nous devons ajouter 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>
    InformationsquelleAutor Mike Phils
  4. 7

    Pour bootstrap 3.0, cela a fonctionné pour moi:

    .myclass .glyphicon {color:blue !important;}
    InformationsquelleAutor puddleglum
  5. 6

    Vous pouvez le faire aussi bien, hopeit aide

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

    Oui, vous pouvez définir les icônes de la couleur blanche.
    voici comment il a travaillé pour moi.

    Bootstrap <3

    HTML

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

    Ce serait faire de votre icône apparaissent en blanc.

    • Le icon-white a fonctionné 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 à portée de main.
    InformationsquelleAutor A.J.
  7. 3

    J'ai créé un autre les couleurs de la bibliothèque pour bootstrap 2.3.2 il est disponible et simple à utiliser pour toute personne intéressée, en plus de couleurs pour les vieux glyphicons bibliothèque.

    InformationsquelleAutor Eric Uldall
  8. 2

    Si c'est seulement un bootstrap icône. Notez que les icônes sont sous le texte, ou plutôt de la typographie. Il suffit d'ajouter la couleur de texte de la classe comme ça. E. g texte principal, texte-info et ainsi de suite et ainsi de suite jusqu'à l'icône de la classe:

    <i class="icon features-icon icons8-collaboration-2 text-primary"></i>
<i class="icon features-icon icons8-collaboration-2 text-secondary"></i>
    InformationsquelleAutor White.Raven
  9. 1

    Bootstrap >= v4.0 chuté glyphicon soutien

    Abandonné les Glyphicons icône de la police. Si vous avez besoin d'icônes, certaines options sont:

    la version en amont de Glyphicons

    Octicons

    Police Impressionnant

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

    Si vous êtes en utilisant Bootstrap >= v4.0 ou plus récent, vous pouvez utiliser les classes de style de bootstrap comme text-success,text-warning etc.

    Par exemple, si vous utilisez fontawesome:

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

    CSS:

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

    HTML

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

    Glyphicons sont supprimés dans la version 4.0, je recommande Font-awesome 4 ou plus récent 🙂

    InformationsquelleAutor Michael Jørgensen
  11. 1

    Toutes les réponses précédentes sont correctes mais ici, c'est une façon simple et rapide si vous avez seulement besoin d'une icône dans un endroit à changer de couleur:

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

    Changer la couleur de glyphicons vers le bleu, dans certains mais pas à tous les endroits à l'aide de Bootstrap 2

    InformationsquelleAutor grepit
  12. 0

    Couleur fonctionne pas, si vous utiliser pour l'amorçage de la police png image, comme je l'.

    [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 css filtre pour la colorisation de l'image, exemple

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