Kann ich die Farbe der Symbolfarbe von Font Awesome ändern?

264

Ich muss mein Symbol <a>aus irgendeinem Grund in ein Tag einschließen.
Gibt es eine Möglichkeit, die Farbe eines Schriftart-Symbols in Schwarz zu ändern?
oder ist es unmöglich, solange es in ein <a>Tag eingewickelt ist ? Font awesome soll Schrift sein, nicht Bild, oder?

Geben Sie hier die Bildbeschreibung ein

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
HUSTEN
quelle
1
Überprüfen Sie dies: fortawesome.github.io/Font-Awesome/examples
Mohammed Zameer

Antworten:

346

Das hat bei mir funktioniert:

.icon-cog {
  color: black;
}

Für Versionen von Font Awesome über 4.7.0 sieht es so aus:

.fa-cog {
  color: black;
}
Evan Hahn
quelle
@ Evans Danke, aber das Problem ist, dass ich irgendwann <i class = "icon-cog icon-white"> auf die schwarz gefärbte Tabellenzelle setze. Ihr CSS gezwungen, es auch in Schwarz zu ändern :(
HUSTEN
3
Sie können Folgendes hinzufügen: .icon-cog.icon-white {Farbe: weiß; }
Evan Hahn
3
Ich bin gerade darauf gestoßen - ich habe festgestellt, dass das Hinzufügen einer Klasse von 'fa' zu allen Symbolen und das anschließende Putten .fa {color: green;}den Trick getan hat. Sie können dann .fa.icon-white {color: white;}den gleichen Effekt erzielen, den Sie oben wünschen.
ClarkeyBoy
Ist es möglich zu ändernbackground-color
vamsikrishnamannem
@vamsikrishnamannem Yup. Sie können background-color: #112233dem CSS hinzufügen . Schauen Sie sich diesen Code als Beispiel an.
Evan Hahn
50

HTML:

    <i class="icon-cog blackiconcolor">

CSS:

    .blackiconcolor {color:black;}

Sie können dem Schaltflächensymbol auch eine zusätzliche Klasse hinzufügen ...

JB
quelle
1
Dies ist eine schöne, ordentliche Lösung. Ich bevorzuge es, Klassen mit einem fa-Präfix wie fa-black oder fa-blue zu benennen, um zu verdeutlichen, dass ich sie auf großartige Symbole für Schriftarten anwende.
DavidHyogo
35

Sie können die Farbe im Stilattribut angeben:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
Schuppen
quelle
16
-1 Erstens ist dies falsch, da dadurch auch die Farbe des Textes geändert wird, nicht nur die Farbe des Symbols, wie angefordert. Zweitens sollte die Verwendung von Inline-CSS nicht gefördert werden.
Adrian Schmidt
Wo steht in der Frage "nur die Farbe des Symbols" und nicht die Farbe des Textes?
Dandrews
3
Ich denke, das hängt ziemlich offensichtlich damit zusammen, wie die Frage formuliert ist. Und es scheint, dass Sie zustimmen würden, da Sie Ihre Antwort aktualisiert haben :)
Adrian Schmidt
2
Ich möchte einen kleinen Hinweis geben für Bootstrap. <i> Tag mit using text-primaryclass, überschreibe die Farbe des Symbols als blau. Es ist also gut, sich dessen bewusst zu sein.
Elia
9

Verwenden Sie dies in Ihrem CSS, um die Farbe der fantastischen Symbole für Ihr gesamtes Projekt zu ändern

.fa {
  color : red;
}
ChAnDu353
quelle
Das ist schön, ändert aber alle Symbole in meinem Projekt. Ich habe Klassen wie .fa-black {color: # 000;} erstellt. Ich habe dann die Fa-Schwarz-Klassen zu den Symbolen hinzugefügt, bei denen ich eine andere Farbe haben wollte.
DavidHyogo
7

Versuche dies:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
Rahul Tathod
quelle
Und wo text-red, text-blueoder text-yellowkommen aus?
Colidyre
es kommt aus Bootstrap-Klassen
Rahul Tathod
6

Wenn Sie die CSS-Datei nicht ändern möchten, funktioniert dies für mich. Fügen Sie in HTML Stil mit Farbe hinzu:

<i class="fa fa-cog" style="color:#fff;"></i>
Lazaros Papadopoulos
quelle
5

Um nur Zahnradsymbole in dieser Art von Schaltfläche zu drücken, können Sie der Schaltfläche eine Klasse zuweisen und die Farbe für das Symbol nur innerhalb der Schaltfläche festlegen.

HTML:

<a class="my-nice-button" href="/users/edit">
    <i class="icon-cog"></i>
    Edit profile
</a>

CSS:

.my-nice-button>i { color: black; }

Dadurch wird jedes Symbol, das direkt von Ihrer Schaltfläche abstammt, schwarz.

Adrian Schmidt
quelle
3

In Bezug auf die Antwort von @ClarkeyBoy funktioniert der folgende Code einwandfrei, wenn Sie die neueste Version von Font-AwesomeSymbolen verwenden oder wenn Sie faKlassen verwenden

.fa.icon-white {
    color: white;
}

Und dann icon-whitezur vorhandenen Klasse hinzufügen

Kategoriegruppe
quelle
2
.fa-search{
    color:#fff;
 }

Wenn Sie diesen Code in CSS schreiben, ändert sich die Farbe in Weiß oder in eine beliebige Farbe. Sie geben sie an

Stanjhae
quelle
2

Geben Sie einfach einen Textstil an, wie Sie möchten: D HTML:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>
Qaan Lee Hoong
quelle
1

Geben Sie ihm einfach den Stil, den Sie möchten

style="color: white;font-size: 20px;"
Rahul Tathod
quelle
1

Sie können die Farbe eines Fontawesome-Symbols ändern, indem Sie die Vordergrundfarbe mithilfe der css colorEigenschaft ändern . Das Folgende sind Beispiele:

<i class="fa fa-cog" style="color:white">

Dies unterstützt auch SVGs

<style>
.fa-cog{
color:white;
}
</style>

<style>
.parent svg, .parent i{
color:white
}
</style>

<div class="parent">
  <i class="fa fa-cog" style="color:white">
</div>

Mohammed Shareef C.
quelle
1

Schreiben Sie diesen Code in dieselbe Zeile, um die Symbolfarbe zu ändern:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">
Warner J Gaitán Guerrero
quelle
0

Wenn Sie die Farbe eines bestimmten Symbols ändern möchten, können Sie Folgendes verwenden:

.fa-stop {
    color:red;
}
Ahmad
quelle
0

Sie können die Symbolfarbe des Font Awesome mit der Bootstrap-Klasse ändern

verwenden

text-color

Beispiel

text-white
Afeesudheen
quelle
0

Für mich hat nur Inline-CSS + Überschreiben funktioniert

<i class="fas fa-ellipsis-v fa-2x" style="color:red !important"></i>
Crasher
quelle
-6

HTML:

<i class="icon-cog blackiconcolor">

CSS:

 .blackiconcolor {color:black;}

Wenn Sie class verwenden, erhalten Sie eine kostenlose Bindungseigenschaft, die Sie auf jedes gewünschte Tag anwenden können.

ameya rote
quelle
4
-1 Schriftart Fantastische Symbole sind Text, daher der Name. Sie sollten wie jeder andere Text mit CSS gefärbt werden, nicht mit herstellerspezifischen Tricks. Da es sich um Text handelt, sind sie bereits schwarz-weiß (oder einfarbig).
Adrian Schmidt
2
@AdrianSchmidt Die oben angegebene Antwort bezieht sich auf die Konvertierung eines Bildes in Schwarz. Ich wollte damit nicht die Schriftfarbe ändern. Ich hoffe, Sie bekommen mich.
Amyey Rote
2
Ich verstehe. Die Antwort ist in Bezug auf die Frage immer noch falsch. Font Awesome Icons sind keine Bilder, sondern Text.
Adrian Schmidt