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


264

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?

entrez la description de l'image ici

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


Réponses:


347

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

@Evans Merci mais le problème est que je mets parfois <i class = "icon-cog icon-white"> sur la cellule du tableau qui est de couleur noire. Votre css forcé de le changer en noir aussi :(
HUSTEN

3
Vous pouvez ajouter les éléments suivants: .icon-cog.icon-white {color: white; }
Evan Hahn

3
Je suis juste tombé sur cela - j'ai trouvé que l'ajout d'une classe de «fa» à toutes les icônes, puis la mise en place .fa {color: green;}faisait l'affaire. Vous pouvez ensuite faire .fa.icon-white {color: white;}pour obtenir le même effet que vous le souhaitez ci-dessus.
ClarkeyBoy

Est-il possible de changerbackground-color
vamsikrishnamannem

@vamsikrishnamannem Yup. Vous pouvez ajouter background-color: #112233au CSS. Consultez ce code pour un exemple.
Evan Hahn

50

HTML:

    <i class="icon-cog blackiconcolor">

css:

    .blackiconcolor {color:black;}

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


1
Ceci est une solution agréable et soignée. Je préfère nommer les classes avec un préfixe fa comme fa-noir ou fa-bleu juste pour qu'il soit clair que je les applique à des icônes de police impressionnantes.
DavidHyogo

36

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>

16
-1 Tout d'abord, c'est faux, car cela changera également la couleur du texte, pas seulement la couleur de l'icône, comme demandé. Deuxièmement, l'utilisation de CSS en ligne ne doit pas être encouragée.
Adrian Schmidt

Où la question dit-elle "juste la couleur de l'icône" et non la couleur du texte?
dandrews le

3
Je pense que cela est plutôt évident de par la façon dont la question est formulée. Et il semble que vous seriez d'accord, puisque vous avez mis à jour votre réponse :)
Adrian Schmidt

2
Je veux donner un petit indice pour Bootstrap. <i> tag avec l'aide de la text-primaryclasse, remplacez la couleur de l'icône par le bleu. donc c'est bon d'en être conscient.
elia

9

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

.fa {
  color : red;
}

C'est bien mais change toutes les icônes de mon projet. J'ai créé des classes comme .fa-black {color: # 000;}. J'ai ensuite ajouté les classes fa-black aux icônes où je voulais une couleur différente.
DavidHyogo

7

Essaye ça:

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

Et d'où vient text-red-il text-blueou text-yellowvient-il?
colidyre

cela vient des cours de bootstrap
Rahul Tathod

6

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>

5

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.


3

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


2
.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


2

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>

1

donnez-lui simplement le style que vous voulez

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

1

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>


1

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

0

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

.fa-stop {
    color:red;
}

0

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

utilisation

text-color

exemple

text-white

0

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>

-6

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.


4
-1 Police Les icônes impressionnantes sont du texte, d'où le nom. Ils doivent être colorés en utilisant CSS comme tout autre texte, et non en utilisant des astuces spécifiques au fournisseur. De plus, comme ils sont du texte, ils sont déjà en noir et blanc (ou mono-couleur).
Adrian Schmidt

2
@AdrianSchmidt La réponse indiquée ci-dessus est pour la conversion d'une image en noir, je ne voulais pas changer la couleur de la police avec cela, j'espère que vous
m'obtenez

2
Je comprends. La réponse est cependant incorrecte en ce qui concerne la question. Les icônes Font Awesome ne sont pas des images, elles sont du texte.
Adrian Schmidt
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.