Puis-je changer la couleur de l'icône de Font Awesome?

Je dois envelopper mon icône dans une <a>balise pour une raison quelconque.
Existe-t-il un moyen possible de changer la couleur d'une icône géniale en noir?
ou est-ce impossible tant qu'il est enveloppé dans une <a>balise? La police géniale est censée être une police et non une image, non?

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

Cela a fonctionné pour moi:

.icon-cog {
  color: black;
}

Pour les versions de Font Awesome supérieures à 4.7.0 , cela ressemble à ceci:

.fa-cog {
  color: black;
}

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

vous pouvez également ajouter une classe supplémentaire à l'icône du bouton ...

Vous pouvez spécifier la couleur dans l'attribut style:

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

Pour changer la couleur des icônes des polices pour l'ensemble de votre projet, utilisez-la dans votre CSS

.fa {
  color : red;
}

Essaye ça:

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

Si vous ne voulez pas modifier le fichier CSS, c'est ce qui fonctionne pour moi. En HTML, ajoutez du style avec de la couleur:

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

Pour ne frapper que les icônes de rouage dans ce type de bouton, vous pouvez attribuer une classe au bouton et définir la couleur de l'icône uniquement à l'intérieur du bouton.

HTML:

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

CSS:

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

Cela rendra toute icône directement descendante de votre bouton noire.

En référence à la réponse @ClarkeyBoy, le code ci-dessous fonctionne correctement, si vous utilisez la dernière version des Font-Awesomeicônes ou si vous utilisez des faclasses

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

Et puis ajoutez icon-whiteà la classe existante

.fa-search{
    color:#fff;
 }

vous écrivez ce code en css et cela changerait la couleur en blanc ou en n'importe quelle couleur que vous voulez, vous le spécifiez

donnez et donnez le style de texte que vous voulez comme: D HTML:

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

donnez-lui simplement le style que vous voulez

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

Vous pouvez changer la couleur d'une icône impressionnante en changeant sa couleur de premier plan à l'aide de la css colorpropriété . Voici des exemples:

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

Cela prend également en charge les 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>

Écrivez ce code sur la même ligne, cela change la couleur de l'icône:

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

Si vous souhaitez modifier la couleur d'une icône spécifique, vous pouvez utiliser quelque chose comme ceci:

.fa-stop {
    color:red;
}

Vous pouvez changer la couleur de l'icône de Font Awesome avec la classe bootstrap

utilisation

text-color

exemple

text-white

Pour moi, la seule chose qui a fonctionné est le CSS en ligne + la priorité

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

HTML:

<i class="icon-cog blackiconcolor">

css:

 .blackiconcolor {color:black;}

L'utilisation de class vous donnera une propriété de liaison gratuite que vous pouvez appliquer sur n'importe quelle balise dont vous avez besoin.