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

Wenn Sie die CSS-Datei nicht ändern wollen, funktioniert es bei mir folgendermaßen. Fügen Sie in HTML einen Stil mit Farbe hinzu:

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

Answer 2

Gibt es eine Möglichkeit, die Farbe eines font-awesome-Symbols in schwarz zu ändern?

Ja, die gibt es. Siehe den Ausschnitt unten

<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Here is what you need to use -->
<a href="http://stackoverflow.com/users/edit" class="fa fa-cog" style="color:black"> Edit Profile</a>

Font awesome soll eine Schrift sein, kein Bild, richtig?

Ja, es ist eine Schriftart. Daher können Sie sie ohne Qualitätsverlust auf jede Größe skalieren.

Answer 3

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="http://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.

Answer 4

Für mich ist das Einzige, was funktioniert hat, Inline-Css + Overriding

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

Answer 5

Mit Bezug auf die Antwort von @ClarkeyBoy funktioniert der folgende Code gut, wenn die neueste Version von Font-Awesome Icons oder wenn Sie fa Klassen

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

Und, dann fügen Sie hinzu icon-white zur bestehenden Klasse