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

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

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?

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.

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

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.

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.

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>

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 .

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.

Funktioniert auch mit dem Style-Tag:

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

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

Es ist eigentlich sehr einfach:

benutz einfach:

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

Beispielsweise:

.icon-compass{
color: #C30;}

Das ist es.

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

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

Sie können die Farbe auch global ändern

dh

 .glyphicon {
       color: #008cba; 
   }

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

#myglyphcustom {
    color:#F00;
}

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.