Husten
Ich muss mein Symbol in ein packen <a> Tag aus irgendeinem Grund.
Gibt es eine Möglichkeit, die Farbe eines Font-Awesome-Symbols in Schwarz zu ändern?
oder ist es unmöglich, solange es in einem verpackt ist <a> Schild? Font awesome sollte Schrift sein, nicht Bild, oder?
<a href="https://stackoverflow.com/users/edit"><i class="icon-cog"></i> Edit profile</a>
Eva Hahn
Das hat bei mir funktioniert:
.icon-cog {
color: black;
}
Für Versionen von Font Awesome oben 4.7.0das sieht so aus:
.fa-cog {
color: black;
}
@Evans Danke, aber das Problem ist, dass ich irgendwann auf die schwarze Tabellenzelle gesetzt habe. Ihr CSS musste es auch in Schwarz ändern: (
– HUSTEN
23. Januar 2013 um 7:57 Uhr
Sie können Folgendes hinzufügen: .icon-cog.icon-white { color: white; }
– Evan Hahn
24. Januar 2013 um 20:59 Uhr
Ich bin gerade darauf gestoßen – ich habe festgestellt, dass allen Symbolen eine Klasse von “fa” hinzugefügt und dann geputtet wird .fa {color: green;} hat es geschafft. Kannst du dann machen .fa.icon-white {color: white;} um den gleichen Effekt wie oben zu erzielen.
– ClarkeyBoy
2. Januar 2015 um 7:52 Uhr
Ist es möglich zu ändern background-color
– vamsikrishnamannem
6. März 2015 um 9:06 Uhr
@vamsikrishnamannem Ja. Du kannst hinzufügen background-color: #112233 zum CSS. Kasse dieser Code zum Beispiel.
– Evan Hahn
6. März 2015 um 15:42 Uhr
HTML:
<i class="icon-cog blackiconcolor">
CSS:
.blackiconcolor {color:black;}
Sie können dem Schaltflächensymbol auch eine zusätzliche Klasse hinzufügen …
Dies ist eine schöne, saubere Lösung. Ich ziehe es vor, Klassen mit einem fa-Präfix wie fa-schwarz oder fa-blau zu benennen, nur um deutlich zu machen, dass ich sie auf fantastische Schriftartsymbole anwende.
– DavidHyogo
4. Dezember 2018 um 4:03 Uhr
Schuppen
Sie können die Farbe im Stilattribut angeben:
<a href="https://stackoverflow.com/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>
-1 Erstens ist dies falsch, da es auch die Farbe des Textes ändert, nicht nur die Farbe des Symbols, wie gewünscht. Zweitens sollte die Verwendung von Inline-CSS nicht gefördert werden.
– Adrian Schmidt
6. September 2013 um 15:31 Uhr
Wo sagt die Frage “nur die Farbe des Symbols” und nicht die Farbe des Textes?
– Schuppen
17. Februar 2016 um 0:23 Uhr
Ich denke, das wird durch die Art und Weise, wie die Frage formuliert ist, ziemlich offensichtlich impliziert. Und es scheint, Sie würden zustimmen, da Sie Ihre Antwort aktualisiert haben 🙂
– Adrian Schmidt
18. Februar 2016 um 11:22 Uhr
Ich möchte einen kleinen Hinweis geben Bootstrap.<i> Tag mit verwenden text-primary Klasse, überschreiben Sie die Farbe des Symbols als blau. Es ist also gut, sich dessen bewusst zu sein.
– emrah
11. März 2018 um 19:29 Uhr
@AdrianSchmidt ist nicht der Farbstil innerhalb des i-Tags und Text außerhalb des i-Tags
– mr.schleife
26. Mai 2021 um 13:00 Uhr
Um die Farbe der fantastischen Symbole der Schriftart für Ihr gesamtes Projekt zu ändern, verwenden Sie dies in Ihrem CSS
.fa {
color : red;
}
Rahul Tathod
Versuche dies:
<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">
Und wo tut text-red, text-blue oder text-yellow komme aus?
– colidyre
29. Oktober 2019 um 17:46 Uhr
es stammt aus Bootstrap-Klassen
– Rahul Tathod
3. März 2020 um 16:40 Uhr
Sie können auch Text-Gefahr anstelle von Text-Rot, Text-Warnung anstelle von Text-Gelb, Text-Erfolg anstelle von Text-Grün usw. verwenden, je nachdem, was Sie wollen.
– Stan lee
26. September 2020 um 12:02 Uhr
dwjohnston
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>
Und wo tut text-red, text-blue oder text-yellow komme aus?
– colidyre
29. Oktober 2019 um 17:46 Uhr
es stammt aus Bootstrap-Klassen
– Rahul Tathod
3. März 2020 um 16:40 Uhr
Sie können auch Text-Gefahr anstelle von Text-Rot, Text-Warnung anstelle von Text-Gelb, Text-Erfolg anstelle von Text-Grün usw. verwenden, je nachdem, was Sie wollen.
– Stan lee
26. September 2020 um 12:02 Uhr
Adrian Schmidt
Um nur Zahnradsymbole in dieser Art von Schaltfläche zu treffen, 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="https://stackoverflow.com/users/edit">
<i class="icon-cog"></i>
Edit profile
</a>
CSS:
.my-nice-button>i { color: black; }
Dadurch wird jedes Symbol, das ein direkter Nachkomme Ihrer Schaltfläche ist, schwarz.
mögliches Duplikat von How to style icon color, size, and shadow of Font Awesome Icons
– James Donnelly
19. Januar 2014 um 10:40 Uhr