Color Change for Font Awesome Icon Not Working

Question

I have some font awesome icons that I want to change to a different color but for some reason it will not work. Here's my html and css:

HTML

<span><i class="fas fa-globe fa-5x change-color"></i></span>

CSS

.change-color {
       color: #3993e5 !important;
               }

check this : https://stackoverflow.com/a/48608619/8620333 – Temani Afif Jun 08 '20 at 12:58 — Temani Afif, Jun 08 '20 at 12:58

score 0 · Answer 1 · answered Jun 08 '20 at 13:09

0

I fixed it. I just had to wrap the icon with a div

<span><div><i class="fas fa-globe fa-5x change-color"></i></div></span>

answered Jun 08 '20 at 13:09

Mertz

65
1
7

I fixed the issue. – Mertz Jun 08 '20 at 13:16
adding the div fixed the issue though – Mertz Jun 08 '20 at 13:21

score 0 · Answer 2 · answered Apr 16 '22 at 03:17

0

Will if you using the js file from FontAwosem you should know that this I HTML tag will be removed and replaced with SVG tag so all you need to do is say something like that in your CSS file

svg {
    color: white;
}

answered Apr 16 '22 at 03:17

ABDO-AR

160
3
9

score -1 · Answer 3 · answered Jun 08 '20 at 12:46

-1

Be sure that your icon font-family is Font-awesome.

answered Jun 08 '20 at 12:46

SoliMoli

781
2
6
25

Link this to your head : and btw your code is not fine : you didn't use } to finish your css style – SoliMoli Jun 08 '20 at 12:49
I do have the cdn in the head and I changed the ending tag and it still doesn't work. – Mertz Jun 08 '20 at 12:51
Your Icon doesn't need font awesome premium membership maybe? – SoliMoli Jun 08 '20 at 12:52
Use font-size please – SoliMoli Jun 08 '20 at 12:56
It doesn't need premium. I need to change the color, not the size. fa-5x is to change the size. – Mertz Jun 08 '20 at 12:58

score -1 · Answer 4 · answered Jun 08 '20 at 13:13

.change-color {
font-family:FontAwesome;
 color:red;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fas fa-globe fa-5x change-color"></i></a>

Color Change for Font Awesome Icon Not Working

4 Answers4