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

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?

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

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

HTML:

    <i class="icon-cog blackiconcolor">

CSS:

    .blackiconcolor {color:black;}

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

Sie können die Farbe im Stilattribut angeben:

<a href="/users/edit"><i class="icon-cog" style="color:black"></i> Edit profile</a>

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

.fa {
  color : red;
}

Versuche dies:

<i class="icon-cog text-red">
<i class="icon-cog text-blue">
<i class="icon-cog text-yellow">

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>

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.

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

.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

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>

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

style="color: white;font-size: 20px;"

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>

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

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

.fa-stop {
    color:red;
}

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

verwenden

text-color

Beispiel

text-white

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

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

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.