Ändern Sie die Farbe von Glyphicons an einigen, aber nicht an allen Stellen mit Bootstrap 2 in Blau

Ich verwende das Bootstrap-Framework für meine Benutzeroberfläche. Ich möchte die Farbe meiner Glyphicons in Blau ändern, aber nicht an allen Orten. An einigen Stellen sollte die Standardfarbe verwendet werden.

Ich habe auf diese beiden Links verwiesen, finde aber nichts hilfreiches.

• Kann ich Bootstrap-Symbolen nur mithilfe von CSS Farbe hinzufügen?
• Wie ändere ich die Glyphicons von Bootstrap 3 in Weiß?

Bitte beachten Sie: Ich verwende Bootstrap 2.3.2 .

Das Symbol übernimmt die Farbe aus dem Wert der colorCSS-Eigenschaft des übergeordneten Elements.

Sie können dies entweder direkt zum Stil hinzufügen:

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

Sie können es auch als Klasse zu Ihrem Symbol hinzufügen und dann die Schriftfarbe in CSS festlegen

HTML

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

CSS

.blue {
    color: blue;
}

Diese Geige hat ein Beispiel.

text-successWenden Sie einfach die Twitter Bootstrap- Klasse auf Glyphicon an:

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

Vollständige Liste der verfügbaren Farben: Bootstrap-Dokumentation: Hilfsklassen
(Blau ist ebenfalls vorhanden)

Endlich habe ich selbst eine Antwort gefunden. Um neue Symbole in 2.3.2 Bootstrap hinzuzufügen, müssen wir Font Awsome CSS in Ihre Datei einfügen . Danach können wir die Stile mit CSS überschreiben, um die Farbe und Größe zu ändern.

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

CSS

.brown{color:#9b846b}

Wenn wir die Farbe des Symbols ändern möchten, fügen Sie einfach eine braune Klasse hinzu, und das Symbol wird braun. Es bietet auch Symbole in verschiedenen Größen.

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>

Sie können dies auch tun, Hopeit hilft

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

Für Bootstrap 3.0 hat dies bei mir funktioniert:

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

Ja, Sie können die Symbole auf die weiße Farbe einstellen. So hat es bei mir funktioniert.

Bootstrap <3

HTML

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

Dadurch wird Ihr Symbol weiß angezeigt.

Ich habe eine alternative Farbbibliothek für Bootstrap 2.3.2 erstellt , die für alle verfügbar und einfach zu verwenden ist, die an mehr Farben für die alte Glyphicons-Bibliothek interessiert sind.

Wenn es nur ein Bootstrap-Symbol ist. Beachten Sie, dass sich Symbole unter Text bzw. Typografie befinden. Fügen Sie einfach die Textfarbklasse wie folgt hinzu. ZB Text-Primär, Text-Info usw. an die Symbolklasse:

<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 hat die Glyphicon-Unterstützung eingestellt

Die Glyphicons-Symbolschrift wurde gelöscht. Wenn Sie Symbole benötigen, stehen folgende Optionen zur Verfügung:

die Upstream-Version von Glyphicons

Oktikonen

Font Awesome

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

Wenn Sie Bootstrap> = v4.0 oder höher verwenden, können Sie vorhandene Stilklassen von Bootstrap verwenden wie text-success, text-warningusw.

Wenn Sie beispielsweise fontawesome verwenden:

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

Glyphicons werden in 4.0 entfernt, ich empfehle Font-awesome 4 oder neuer :)

Alle vorherigen Antworten sind korrekt, aber hier ist eine einfache und schnelle Möglichkeit, wenn Sie nur ein Symbol an einer Stelle benötigen, um die Farbe zu ändern:

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

Farbe funktioniert nicht, wenn Sie für Bootstrap-Schrift png-Bild verwenden, wie ich.

[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 verwendet einen CSS-Filter, um beispielsweise Bilder einzufärben

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