Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I change the color of Font Awesome's icon color?

I have to wrap my icon within an <a> tag for some reason.
Is there any possible way to change the color of a font-awesome icon to black?
or is it impossible as long as it wrapped within an <a> tag? Font awesome is supposed to be font not image, right?

enter image description here

<a href="/users/edit"><i class="icon-cog"></i> Edit profile</a>
like image 378
HUSTEN Avatar asked Oct 04 '22 14:10

HUSTEN


People also ask

How can I change the color of my icons?

To change the color of an icon, select the icon you'd like to edit. The Format tab will appear. Then click Graphics Fill and select a color from the drop-down menu. To add an outline to your icon, click Shape Outline and select a color from the drop-down menu.

Can I edit font awesome icons?

Font Awesome icons can be customized even further using your own CSS.

How do you change the font color?

Go to Format > Font > Font. + D to open the Font dialog box. Select the arrow next to Font color, and then choose a color.


2 Answers

This worked for me:

.icon-cog {
  color: black;
}

For versions of Font Awesome above 4.7.0, it looks this:

.fa-cog {
  color: black;
}
like image 166
Evan Hahn Avatar answered Oct 13 '22 05:10

Evan Hahn


HTML:

    <i class="icon-cog blackiconcolor">

css :

    .blackiconcolor {color:black;}

you can also add extra class to the button icon...

like image 24
J.B. Avatar answered Oct 13 '22 07:10

J.B.