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

Question

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

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

Answer 1

Cela a marché pour moi :

.icon-cog {
  color: black;
}

Pour les versions de Font Awesome supérieures à 4.7.0 ça ressemble à ça :

.fa-cog {
  color: black;
}

Answer 2

HTML :

    <i class="icon-cog blackiconcolor">

css :

    .blackiconcolor {color:black;}

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

Answer 3

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

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

Answer 4

Pour ne faire apparaître que les icônes dans ce type de bouton, vous pouvez donner une classe au bouton et définir la couleur de l'icône uniquement lorsqu'elle se trouve dans le bouton.

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

Cela rendra noire toute icône qui est un descendant direct de votre bouton.

Answer 5

HTML :

<i class="icon-cog blackiconcolor">

css :

 .blackiconcolor {color:black;}

L'utilisation de la classe vous donnera une propriété de liaison libre que vous pourrez appliquer sur n'importe quelle balise que vous souhaitez.