Kann ich Bootstrap-Symbolen nur mithilfe von CSS Farbe hinzufügen?

159

Der Bootstrap von Twitter verwendet Icons von Glyphicons . Sie sind available in dark gray and whitestandardmäßig " ":

Bild-58.png

Ist es möglich, einige CSS-Tricks zu verwenden, um die Farben der Symbole zu ändern? Ich hatte auf eine andere CSS3-Brillanz gehofft, die verhindern würde, dass für jede Farbe ein Symbolbild festgelegt werden muss.

Ich weiß, dass Sie die Hintergrundfarbe des einschließenden ( <i>) Elements ändern können , aber ich spreche von der Vordergrundfarbe des Symbols. Ich denke, es wäre möglich, die Transparenz des Symbolbilds umzukehren und dann die Hintergrundfarbe festzulegen.

Kann ich Bootstrap-Symbolen nur mit CSS Farbe hinzufügen?

cwd
quelle
Ich glaube nicht ... Aber Sie könnten das wahrscheinlich mit Javascript und einem Canvas-Element tun.
Bfavaretto
@bfavaretto - kannst du das näher erläutern? Meinen Sie damit, Code / Koordinaten zu finden, um jedes der Symbole zu zeichnen, oder das vorhandene PNG-Bild irgendwie zu verwenden?
CWD
1
Entschuldigung, ich habe nicht genug Erfahrung mit dem Canvas-Element, um Ihnen Code vorzuschlagen, aber ich weiß, dass Sie die Pixel einzeln mit einem Canvas bearbeiten können.
Bfavaretto

Antworten:

189

Ja, wenn Sie Font Awesome mit Bootstrap verwenden! Die Symbole unterscheiden sich geringfügig, aber es gibt noch mehr davon. Sie sehen in jeder Größe gut aus und Sie können die Farben ändern.

Grundsätzlich handelt es sich bei den Symbolen um Schriftarten, deren Farbe Sie nur mit der CSS-Farbeigenschaft ändern können. Anweisungen zur Integration finden Sie unten auf der Seite unter dem angegebenen Link.


Bearbeiten: Bootstrap 3.0.0-Symbole sind jetzt Schriftarten!

Wie einige andere bereits mit der Veröffentlichung von Bootstrap 3.0.0 erwähnt haben, sind die Standard- Symbol-Glyphen jetzt Schriftarten wie Font Awesome, und die Farbe kann einfach durch Ändern der colorCSS-Eigenschaft geändert werden . Das Ändern der Größe kann über die font-sizeEigenschaft erfolgen.

hajpoj
quelle
9
Ahh, klug! Vergessen Sie nicht einzustellen, cursor: default;damit Benutzer die I-Bar nicht sehen. Schauen
Dai
4
Wenn Sie mit der Maus über Text fahren (wie in einem Textverarbeitungsprogramm), sieht Ihr Cursor wie ein übergroßes Großbuchstaben aus I. Er wird zum Auswählen von Text verwendet. In CSS wird es als bezeichnet cursor: text;. Es ist auch als "I-Beam" bekannt.
Dai
38

Mit der neuesten Version von Bootstrap RC 3 ist das Ändern der Farbe der Symbole so einfach wie das Hinzufügen einer Klasse mit der gewünschten Farbe und das Hinzufügen zum Bereich.

Standard schwarze Farbe:

<h1>Password Changed <span class="glyphicon glyphicon-ok"></span></h1>

würde werden

<h1>Password Changed <span class="glyphicon glyphicon-ok icon-success"></span></h1>

CSS

.icon-success {
    color: #5CB85C;
}

Bootstrap 3 Glyphicons Liste

fseminario
quelle
17

Da die glyphicons sind jetzt Schriftarten, kann man die Verwendung kontextuellen Klassen die entsprechende Farbe , um die Symbole zu übernehmen.

Beispiel: Durch <span class="glyphicon glyphicon-info-sign text-info"></span> Hinzufügen text-infozum CSS erhält das Symbol die Farbe info blue.

truncie
quelle
Dank suchte nach einer Möglichkeit, die Kontextklassen anzuwenden. Jede der Text- * Kontextklassen wird funktionieren
Dustin Hodges
14

Eine andere Möglichkeit, Bootstrap-Symbole in einer anderen Farbe zu haben, besteht darin, eine neue PNG-Datei in der gewünschten Farbe (z. B. Magenta) zu erstellen und als / path-to-bootstrap-css / img / glyphicons-halflings- magenta .png zu speichern

In Ihren Variablen.less finden

// Sprite icons path
// -------------------------
@iconSpritePath:          "../img/glyphicons-halflings.png";
@iconWhiteSpritePath:     "../img/glyphicons-halflings-white.png";

und fügen Sie diese Zeile hinzu

@iconMagentaSpritePath:     "../img/glyphicons-halflings-magenta.png";

In deinen Sprites.less hinzufügen

/* Magenta icons with optional class, or on hover/active states of certain elements */
.icon-magenta,
.nav-pills > .active > a > [class^="icon-"],
.nav-pills > .active > a > [class*=" icon-"],
.nav-list > .active > a > [class^="icon-"],
.nav-list > .active > a > [class*=" icon-"],
.navbar-inverse .nav > .active > a > [class^="icon-"],
.navbar-inverse .nav > .active > a > [class*=" icon-"],
.dropdown-menu > li > a:hover > [class^="icon-"],
.dropdown-menu > li > a:hover > [class*=" icon-"],
.dropdown-menu > .active > a > [class^="icon-"],
.dropdown-menu > .active > a > [class*=" icon-"],
.dropdown-submenu:hover > a > [class^="icon-"],
.dropdown-submenu:hover > a > [class*=" icon-"] {
  background-image: url("@{iconMagentaSpritePath}");
}

Und benutze es so:

<i class='icon-chevron-down icon-magenta'></i>

Hoffe es hilft jemandem.

Sepp Ludger
quelle
5
wollte nur wiederholenI was hoping for some other css3 brilliance that would prevent having to have an icon image set for each color
cwd
Kann nicht nur über CSS erfolgen, das auch browserübergreifend kompatibel ist. Normalerweise benötigen die Leute ein Farbschema mit verwandten Symbolen - daher würde ich sagen, dass bis zu 5 Farbsätze keine große Herausforderung darstellen.
Foxybagga
@seppludger Wie erstellt man ein neues Farb-Halbling-Sprite? Ist Ihnen das gelungen? Ich kann die Farben nicht ändern, wenn ich sie in einen Grafikeditor lade.
Norman
7

Schnelle und schmutzige Arbeit, die es für mich erledigt hat, das Symbol nicht wirklich zu färben, sondern es mit einem Etikett oder Abzeichen in der gewünschten Farbe zu umgeben;

<span class="label-important label"><i class="icon-remove icon-white"></i></span>
<span class="label-success label"><i class="icon-ok icon-white"></i></span>
frbl
quelle
Ihre Antwort war nützlich, + 1.Ich wollte das Bearbeitungssymbol verwenden und die gelbe Farbe setzen. Können Sie mir bitte sagen, wie das geht?
Nun, Sie könnten einfach das Symbol-OK in etwas anderes ändern. zB <span class = "label-warning label"> <i class = "icon- <iconname> icon-white"> </ i> </ span>. Beispiel: <span class = "label-warning label"> <i class = "icon-edit icon-white"> </ i> </ span>. Es ist besser, für den neuen Bootstrap imo zu gehen ..
frbl
6

Die Bootstrap-Glyphen sind Schriftarten. Dies bedeutet, dass es wie jeder andere Text durch CSS-Stil geändert werden kann.

CSS:

<style>
   .glyphicon-plus {
       color: #F00; 
   }
</style>

HTML:

<span class="glyphicon glyphicon-plus"></span>

Beispiel:

<!doctype html>
<html>
<head>
<title>Glyphicon Colors</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
   .glyphicon-plus {
        color: #F00;    
   }
</style>
</head>

<body>
    <span class="glyphicon glyphicon-plus"></span>
</body>
</html>


Sehen Sie sich den Kurs Up and Running with Bootstrap 3 von Jen Kramer an oder sehen Sie sich die einzelne Lektion zum Überschreiben von Kern-CSS mit benutzerdefinierten Stilen an .

Eugene
quelle
4

Das ist alles ein bisschen Kreisverkehr ..

Ich habe die Glyphen so verwendet

  </div>
        <div class="span2">
            <span class="glyphicons thumbs_up"><i class="green"></i></span>
        </div>
        <div class="span2">
            <span class="glyphicons thumbs_down"><i class="red"></i></span>
        </div>

und um die Farbe zu beeinflussen, habe ich ein bisschen CSS am Kopf so eingefügt

<style>
        i.green:before {
            color: green;
        }
        i.red:before {
            color: red;
        }
    </style>

Voila, grüne und rote Daumen.

Monster X.
quelle
4

Funktioniert auch mit dem Style-Tag:

<span class="glyphicon glyphicon-ok" style="color:#00FF00;"></span>

<span class="glyphicon glyphicon-remove" style="color:#FF0000;"></span>

Geben Sie hier die Bildbeschreibung ein

joan16v
quelle
3

Es ist eigentlich sehr einfach:

benutz einfach:

.icon-name{
color: #0C0;}

Beispielsweise:

.icon-compass{
color: #C30;}

Das ist es.

Aniruddh Dixit
quelle
3

Verwenden Sie die mask-imageEigenschaft, aber es ist ein bisschen ein Hack. Dies wird im Safari-Blog hier demonstriert .

Es ist auch eingehende beschrieben hier .

Grundsätzlich würden Sie eine CSS-Box mit beispielsweise a erstellen background-image: gradient(foo);und dann basierend auf diesen PNG-Bildern eine Bildmaske darauf anwenden.

Es würde Ihnen Entwicklungszeit sparen, einzelne Bilder in Photoshop zu erstellen, aber ich denke nicht, dass es viel Bandbreite sparen würde, wenn Sie die Bilder nicht in einer Vielzahl von Farben anzeigen würden. Persönlich würde ich es nicht verwenden, weil Sie Ihr Markup anpassen müssen, um die Technik effektiv zu nutzen, aber ich bin ein Mitglied der Denkschule "Reinheit ist unerlässlich".

Dai
quelle
1
Denken Sie daran, die Unterstützung für die mask-imageImmobilie ist nicht so toll .
Scott Bartell
1

Die akzeptierte Antwort (mit Font Awesome) ist die richtige. Da ich jedoch nur wollte, dass die rote Variante bei Validierungsfehlern angezeigt wird, habe ich die Verwendung eines Addon-Pakets beendet, das freundlicherweise auf dieser Website angeboten wird .

Ich habe gerade die URL-Pfade in CSS-Dateien bearbeitet, da sie absolut sind (beginnen mit /) und ich lieber relativ bin. So was:

.icon-red {background-image: url("../img/glyphicons-halflings-red.png") !important;}
.icon-purple {background-image: url("../img/glyphicons-halflings-purple.png") !important;}
.icon-blue {background-image: url("../img/glyphicons-halflings-blue.png") !important;}
.icon-lightblue {background-image: url("../img/glyphicons-halflings-lightblue.png") !important;}
.icon-green {background-image: url("../img/glyphicons-halflings-green.png") !important;}
.icon-yellow {background-image: url("../img/glyphicons-halflings-yellow.png") !important;}
.icon-orange {background-image: url("../img/glyphicons-halflings-orange.png") !important;}
mppfiles
quelle
Schließlich die mit den alten Versionen von Bootstrap kompatible
Dmitry Ginzburg
1

Sie können die Farbe auch global ändern

dh

 .glyphicon {
       color: #008cba; 
   }
Entwickler
quelle
1

Verwenden Sie einfach die GLYPHICONS und Sie können die Farbe ändern, indem Sie einfach das CSS einstellen:

#myglyphcustom {
    color:#F00;
}
Valter Lorran
quelle
0

Ich dachte, ich könnte diesen Ausschnitt zu diesem alten Beitrag hinzufügen. Dies hatte ich in der Vergangenheit getan, bevor die Symbole Schriftarten waren:

<i class="social-icon linkedin small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>
<i class="social-icon facebook small" style="border-radius:7.5px;height:15px;width:15px;background-color:white;></i>

Dies ist der hinterhältigen Antwort von @frbl sehr ähnlich, verwendet jedoch kein anderes Bild. Stattdessen wird die Hintergrundfarbe des <i>Elements auf gesetzt whiteund die CSS-Eigenschaft verwendet border-radius, um das gesamte <i>Element "gerundet" zu machen . Wenn Sie bemerkt haben, ist der Wert von border-radius(7.5px) genau halb so groß wie der Wert von widthund height(beide 15px, wodurch das Symbol quadratisch wird), wodurch das <i>Element kreisförmig wird.

WebWanderer
quelle