'Color Change for Font Awesome Icon Not Working

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


Solution 1:[1]

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>

Solution 2:[2]

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

Solution 3:[3]

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

Solution 4:[4]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mertz
Solution 2 ABDO-AR
Solution 3 SoliMoli
Solution 4 SoliMoli

Related Questions