Posso cambiare il colore dell'icona di Font Awesome?

Devo avvolgere la mia icona all'interno di un <a>tag per qualche motivo.
Esiste un modo possibile per cambiare il colore di un'icona impressionante per il carattere in nero?
o è impossibile finché è racchiuso in un <a>tag? Il carattere fantastico dovrebbe essere il carattere non l'immagine, giusto?

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

Questo ha funzionato per me:

.icon-cog {
  color: black;
}

Per le versioni di Font Awesome sopra 4.7.0 , sembra che:

.fa-cog {
  color: black;
}

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

puoi anche aggiungere ulteriore classe all'icona del pulsante ...

È possibile specificare il colore nell'attributo di stile:

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

Per cambiare il fantastico colore delle icone del carattere per l'intero progetto, usa questo nel tuo CSS

.fa {
  color : red;
}

Prova questo:

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

Se non vuoi modificare il file CSS, questo è ciò che funziona per me. In HTML, aggiungi stile con il colore:

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

Per colpire solo le icone a cremagliera in quel tipo di pulsante, puoi assegnare una classe al pulsante e impostare il colore dell'icona solo all'interno del pulsante.

HTML:

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

CSS:

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

Questo renderà nera qualsiasi icona che discende direttamente dal tuo pulsante.

Con riferimento alla risposta di @ClarkeyBoy, il codice seguente funziona bene, se si utilizza l'ultima versione delle Font-Awesomeicone o se si utilizzano le faclassi

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

E poi aggiungi icon-whitealla classe esistente

.fa-search{
    color:#fff;
 }

scrivi quel codice in CSS e cambierebbe il colore in bianco o in qualsiasi colore tu voglia, lo specifichi

basta dare e stile al testo quello che vuoi: D HTML:

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

basta dargli lo stile come vuoi tu

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

È possibile modificare il colore di un'icona fontawesome da cambiando il suo colore di primo piano utilizzando la css colorproprietà . I seguenti sono esempi:

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

Questo supporta anche 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>

Scrivi questo codice sulla stessa riga, questo cambia il colore dell'icona:

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

Se vuoi cambiare il colore di un'icona specifica, puoi usare qualcosa del genere:

.fa-stop {
    color:red;
}

Puoi cambiare il colore dell'icona di Font Awesome con la classe bootstrap

uso

text-color

esempio

text-white

Per me l'unica cosa che ha funzionato è inline css + override

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

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

L'uso di class ti darà una proprietà di associazione gratuita che puoi applicare su qualsiasi tag richiesto.