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

Question

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>

possible duplicate of [How to style icon color, size, and shadow of Font Awesome Icons](http://stackoverflow.com/questions/12272372/how-to-style-icon-color-size-and-shadow-of-font-awesome-icons) — James Donnelly, Jan 19 '14 at 10:40

Evan Hahn · Accepted Answer · 2018-07-19T19:37:43.797

428

This worked for me:

.icon-cog {
  color: black;
}

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

.fa-cog {
  color: black;
}

edited Jul 19 '18 at 19:37

answered Jan 23 '13 at 07:31

Evan Hahn

12,147
9
41
59

@Evans Thanks but the problem is I sometime put – HUSTEN Jan 23 '13 at 07:57
3

You can add the following: .icon-cog.icon-white { color: white; } – Evan Hahn Jan 24 '13 at 20:59
4

Just came across this - I found that adding a class of 'fa' to all icons and then putting `.fa {color: green;}` did the trick. You can then do `.fa.icon-white {color: white;}` to get the same effect as you want above. – ClarkeyBoy Jan 02 '15 at 07:52
Is it possible to change `background-color` – vamsikrishnamannem Mar 06 '15 at 09:06
1

@vamsikrishnamannem Yup. You can add `background-color: #112233` to the CSS. Check out [this code](http://jsfiddle.net/qty0m3u0/) for an example. – Evan Hahn Mar 06 '15 at 15:42

score 64 · Answer 2 · answered Dec 01 '13 at 19:27

64

HTML:

    <i class="icon-cog blackiconcolor">

css :

    .blackiconcolor {color:black;}

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

answered Dec 01 '13 at 19:27

J.B.

675
5
3

1

This is a nice, neat solution. I prefer to name classes with an fa prefix like fa-black or fa-blue just to make it clear I'm applying them to font awesome icons. – DavidHyogo Dec 04 '18 at 04:03

dandrews · Answer 3 · 2015-08-19T13:33:21.430

60

You can specify the color in the style attribute:

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

edited Aug 19 '15 at 13:33

answered Mar 11 '13 at 19:06

dandrews

2,995
1
20
22

23

-1 Firstly, this is wrong, because it will change the color of the text also, not just the color of the icon, as requested. Secondly, using inline css should not be promoted. – Adrian Schmidt Sep 06 '13 at 15:31
1

Where does the question say "just the color of the icon" and not the color of the text? – dandrews Feb 17 '16 at 00:23
5

I think that's rather obviously implied by the way the question is phrased. And it seems you would agree, since you updated your answer :) – Adrian Schmidt Feb 18 '16 at 11:22
3

I wanna give a small hint for `Bootstrap`.`` tag with using `text-primary` class, override the color of icon as blue. so its good to be aware of it. – eemrah Mar 11 '18 at 19:29
@AdrianSchmidt isn't the color style inside the i tag and text outside the i tag – mr.loop May 26 '21 at 13:00
@mr.loop Yes, the answer has been edited since I posted my comment. – Adrian Schmidt Jun 09 '21 at 08:46
@AdrianSchmidt ok. didn't noticed – mr.loop Jun 09 '21 at 16:34

score 13 · Answer 4 · edited Mar 25 '16 at 06:59

13

Try this:

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

edited Mar 25 '16 at 06:59

Frank van Wijk

3,234
20
41

answered Mar 25 '16 at 06:13

Rahul Tathod

348
5
12

1

And where does `text-red`, `text-blue` or `text-yellow` come from? – colidyre Oct 29 '19 at 17:46
it come from bootstrap classes – Rahul Tathod Mar 03 '20 at 16:40
2

you can also use text-danger instead of text-red, text-warning instead of text-yellow, text-success instead of text-green etc. depends on what you want. – stanlee Sep 26 '20 at 12:02

score 12 · Answer 5 · answered Feb 23 '17 at 02:57

12

To change the font awesome icons color for your entire project use this in your css

.fa {
  color : red;
}

answered Feb 23 '17 at 02:57

ChAnDu353

541
7
11

This is nice but changes all the icons in my project. I created classes like .fa-black {color: #000;}. I then added the fa-black classes to the icons where I wanted a different colour. – DavidHyogo Dec 04 '18 at 04:02

score 9 · Answer 6 · edited Dec 04 '18 at 04:44

9

If you don't want to alter the CSS file, this is what works for me. In HTML, add style with color:

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

edited Dec 04 '18 at 04:44

dwjohnston

11,163
32
99
194

answered Sep 08 '17 at 16:10

Lazaros Papadopoulos

929
8
22

score 7 · Answer 7 · answered Aug 09 '20 at 08:11

Is there any possible way to change the color of a font-awesome icon to black?

Yes, there is. See the snipped bellow

<!-- Assuming that you don't have, this needs to be in your HTML file (usually the header) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Here is what you need to use -->
<a href="/users/edit" class="fa fa-cog" style="color:black"> Edit Profile</a>

Font awesome is supposed to be font not image, right?

Yes, it is a font. Therefore, you are able to scale it to any size without losing quality.

score 6 · Answer 8 · answered Sep 06 '13 at 15:37

To hit only cog-icons in that kind of button, you can give the button a class, and set the color for the icon only when inside the button.

HTML:

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

CSS:

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

This will make any icon that is a direct descendant of your button black.

score 5 · Answer 9 · answered Mar 29 '20 at 17:08

5

For me the only thing that worked is inline css + overriding

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

answered Mar 29 '20 at 17:08

Crasher

2,211
2
18
17

score 4 · Answer 10 · answered Mar 27 '16 at 06:05

4

With reference to @ClarkeyBoy answer, below code works fine, if using latest version of Font-Awesome icons or if you using fa classes

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

And, then add icon-white to existing class

answered Mar 27 '16 at 06:05

Sategroup

955
13
29

score 3 · Answer 11 · edited Sep 28 '17 at 19:00

3

just give and text style whatever you want like :D HTML:

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

edited Sep 28 '17 at 19:00

Styx

9,863
8
43
53

answered Sep 28 '17 at 18:41

Qaan Lee Hoong

31
2

score 2 · Answer 12 · answered Jul 15 '15 at 01:13

2

.fa-search{
    color:#fff;
 }

you write that code in css and it would change the color to white or any color you want, you specify it

answered Jul 15 '15 at 01:13

Stanjhae

255
2
7

score 2 · Answer 13 · answered Sep 23 '19 at 05:30

2

You can change the Font Awesome's icon color with the bootstrap class

use

text-color

example

text-white

answered Sep 23 '19 at 05:30

Afeesudheen

936
2
12
21

Imran Wahid · Answer 14 · 2022-06-22T07:52:13.407

2

Sometimes changing the colour in the external css file doesn't work. You can add inline css property in the icon tag and that will work.

For example

<i class="fa-solid fa-keyboard" style="color: grey;"></i>

edited Jun 22 '22 at 07:52

answered Jun 22 '22 at 06:36

Imran Wahid

21
4

score 1 · Answer 15 · edited Sep 16 '16 at 06:24

1

just give it the style whatever you want like

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

edited Sep 16 '16 at 06:24

Buddy

10,874
5
41
58

answered Sep 16 '16 at 06:20

Rahul Tathod

348
5
12

score 1 · Answer 16 · answered Jun 13 '19 at 18:18

You can change the color of a fontawesome icon by changing its foreground color using the css color property. The following are examples:

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

This supports svgs also

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

score 1 · Answer 17 · edited Sep 14 '19 at 21:26

1

Write this code in the same line, this change the icon color:

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

edited Sep 14 '19 at 21:26

Tasos K.

7,979
7
39
63

answered Sep 14 '19 at 20:03

Warner J Gaitán Guerrero

19
1

score 1 · Answer 18 · answered Aug 09 '20 at 08:25

1

Use color property to change the color of your target element as follow :

.icon-cog { // selector of your element
    color: black;
}

Or in the newest version of font-awesome , you can choose among filled or not filled icons

answered Aug 09 '20 at 08:25

mohamed ibrahim

567
4
12

score 0 · Answer 19 · answered Sep 05 '19 at 12:06

0

If you want to change the color of a specific icon, you can use something like this:

.fa-stop {
    color:red;
}

answered Sep 05 '19 at 12:06

Ahmad

8,811
11
76
141

score 0 · Answer 20 · answered Dec 21 '20 at 10:43

It might a little bit tricky to change the color of font-awesome icons. The simpler method is to add your own class name inside the font-awesome defined classes like this:

.

And target your custom_defined__class_name in your CSS to change the color to whatever you like.

score 0 · Answer 21 · answered Jun 02 '21 at 04:04

0

Open the svg file in vs code or something

change the line

path fill="gray" to what ever color you want! in my case i change it to gray!

answered Jun 02 '21 at 04:04

Rasla

91
1
4

Ian Macharia · Answer 22 · 2023-01-12T16:09:47.207

0

I added a style, then color of your choice and make sure to make it bold

edited Jan 12 '23 at 16:09

answered Jan 12 '23 at 16:08

Ian Macharia

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jan 13 '23 at 11:59

score -8 · Answer 23 · edited Nov 10 '16 at 12:02

-8

HTML:

<i class="icon-cog blackiconcolor">

css :

 .blackiconcolor {color:black;}

Using class will give you a free binding property which you can apply on any tag you require.

edited Nov 10 '16 at 12:02

Re Captcha

3,125
2
22
34

answered Jan 23 '13 at 07:44

ameya rote

1,116
1
9
13

4

-1 Font Awesome icons are text, hence the name. They should be colored using css like any other text, not using vendor-specific tricks. Also, since they are text, they are already black-and-white (or mono-color). – Adrian Schmidt Sep 06 '13 at 15:34
2

@AdrianSchmidt Above stated answer is for converting an image to black, I didn't mean to change the font color with this, I hope you are getting me .. – ameya rote Sep 08 '13 at 13:13
2

I understand. The answer is still incorrect in regard to the question though. Font Awesome icons are not images, they are text. – Adrian Schmidt Sep 09 '13 at 09:14

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

23 Answers23

Linked

Related