How do change Font Awesome 5 icon colour?

Question

<i class="fa fa-windows" style="font-size:200px;"></i>

I have this css:

.fa fa-windows { color: 00DDFF; } however the colour doesnt seem to change. What am I doing wrong?

`.fa.fa-windows` – Madhawa Priyashantha Oct 03 '19 at 07:17 — Madhawa Priyashantha, Oct 03 '19 at 07:17
Your selector is wrong, and the color value is invalid – Carl Binalla Oct 03 '19 at 07:21 — Carl Binalla, Oct 03 '19 at 07:21

score 0 · Answer 1 · answered Oct 03 '19 at 07:19

0

i.fa.fa-windows {
  color:red;
}

If this doesn't work for you, then some your other css rule is override it

answered Oct 03 '19 at 07:19

protestator

311
1
15

score 0 · Answer 2 · edited Oct 03 '19 at 13:19

0

try this

.fa-windows {
  color: #00DDFF !important;
}

edited Oct 03 '19 at 13:19

Mustapha Larhrouch

3,373
3
14
28

answered Oct 03 '19 at 07:22

Kamlesh Bhurke

309
2
6

1

ohh I didnt see the `#` `.fa-windows { color: #00DDFF; }` this is correct if that is not working try to use this `.fa-windows { color:#00DDFF !important; }` – Kamlesh Bhurke Oct 03 '19 at 08:39
You can click on the edit button above and update your answer with the correct info. – Gosi Oct 03 '19 at 08:42

Tec J · Answer 3 · 2019-10-03T07:54:13.450

0

You can do it like this. When you are using two classes in order to select an element don't keep spaces between those classes.

.fa .fa-windows - This is wrong.
.fa.fa-windows - This is right.

<style type="text/css">


.fa.fa-windows {
  color: #00DDFF;
}

</style>

edited Oct 03 '19 at 07:54

answered Oct 03 '19 at 07:27

Tec J

108
7

score 0 · Answer 4 · answered Oct 03 '19 at 07:37

You are missing # sign in color code and (.) in class. please try this code below:

.fa.fa-windows {
    color: #00DDFF !important;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-windows" style="font-size:200px;"></i>

score 0 · Answer 5 · answered Oct 03 '19 at 07:41

0

Your selector is wrong and for the hexadecimal code color you have to add the character '#', try this:

.fa-windows {
  color: #00DDFF;
}

answered Oct 03 '19 at 07:41

borchvm

3,533
16
44
45

How do change Font Awesome 5 icon colour?

5 Answers5