web-dev-qa-db-fra.com

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

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

enter image description here

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

Cela a fonctionné pour moi:

.icon-cog {
  color: black;
}

Pour les versions de Font Awesome ci-dessus 4.7., voici ce qui se présente:

.fa-cog {
  color: black;
}
326
Evan Hahn

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

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

45
J.B.

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>
31
dandrews

Pour changer la couleur des polices impressionnantes de police pour votre projet entier, utilisez ceci dans votre css

.fa {
  color : red;
}
8
ChAnDu353

Si vous ne voulez pas modifier le fichier CSS, voici ce qui fonctionne pour moi. En HTML, ajoutez un style avec la couleur:

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

Essaye ça:

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

Pour ne frapper que des icônes cog 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 qui est un descendant direct de votre bouton noir.

5
Adrian Schmidt

En ce qui concerne la réponse @ClarkeyBoy, le code ci-dessous fonctionne correctement si vous utilisez la dernière version des icônes Font-Awesome ou si vous utilisez fa classes.

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

Et puis ajoutez icon-white à la classe existante

3
Sategroup

il suffit de donner le style de texte que vous voulez: D HTML:

<a href="javascript:;" class="fa fa-trash" style="color:#d9534f;">
   <span style="color:black;">Text Name</span>
</a>
2
Qaan Lee Hoong
.fa-search{
    color:#fff;
 }

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

2
Ceejae

il suffit de lui donner le style que vous voulez

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

Vous pouvez modifier la couleur d'une icône fontawesome en en modifiant sa couleur au premier plan à l'aide de la propriété csscolor. Voici des exemples:

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

Cela supporte aussi 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>
0
Mohammed Shareef C