Kann ich die Farbe des Font Awesome-Zahnradsymbols ändern?

Question

Ich muss mein Symbol in eine <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 innerhalb einer <a> Tag? Font awesome soll eine Schrift sein, kein Bild, richtig?

<a href="stackoverflow.com/users/edit"><i class="icon-cog"></i> Edit profile</a>

Answer 1

Sie können die Farbe eines fontawesome-Symbols ändern, indem Sie seine Vordergrundfarbe ändern unter Verwendung der css color Eigenschaft . Nachstehend einige 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>

---

Answer 2

Schreiben Sie diesen Code in dieselbe Zeile, damit sich die Farbe des Symbols ändert:

<li class="fa fa-id-card-o" style="color:white" aria-hidden="true">

Answer 3

Verwenden Sie Farbe Eigenschaft, um die Farbe des Zielelements wie folgt zu ändern:

.icon-cog { // selector of your element
    color: black;
}

Oder in der neuesten Version von Schriftart-awesome können Sie wählen zwischen gefüllt o nicht ausgefüllte Icons

Answer 4

Ich habe einen Stil hinzugefügt, dann eine Farbe Ihrer Wahl und stellen Sie sicher, dass sie fett ist

Answer 5

Öffnen Sie die svg-Datei in vs code oder ähnlichem

die Zeile ändern

path fill="gray" in eine beliebige Farbe ändern! In meinem Fall ändere ich es in grau!