CODEWITHSUNDEEP
javascripthtmlcssreactjsfont-awesome
Ricky
Ricky

Reputation: 153

Font-Awesome icons not changing color React

I'm trying to change the color of my FontAwesomeIcon and it stays white.

I've tried using style={{color: 'lime'}}, color="green", and adding a class to the icon and styling the class.

      <li class="actions">
        <FontAwesomeIcon icon={faPlay} className="start" style={{ 'color': "lime" }} />
        <FontAwesomeIcon icon={faStop} className="stop" />
        <FontAwesomeIcon icon={faTrash} className="delete" />
        <FontAwesomeIcon icon={faPencilAlt} className="edit" />
      </li>

I expect the icon to be a lime color, but it stays white.

I've found out if I change the "fill" in the svg on the html to "lime" it changes color.

Upvotes: 8

Views: 5892

Answers (3)

Afsal P U
Afsal P U

Reputation: 1

if you set universal set color is white or something else, color changing function won't work

<div className="two">
<FontAwesomeIcon icon={faArrowRightFromBracket}
                 className="colred" /> 
<a href="#logout" style={{color:'red'}}>Logout</a> 
</div>


*{
padding: 0;
margin:0;
box-sizing: border-box;
list-style-type: none;
text-decoration: none;
// color:#fff;
}

Upvotes: 0

Ahmad
Ahmad

Reputation: 72573

Apparently there's a color prop for FontAwesomeIcon as well. So you can just do this:

<FontAwesomeIcon icon={faPlay} className="start" color="lime" />

Upvotes: 5

Ricky
Ricky

Reputation: 153

I found a workaround, if I target the path element with css, and color that it will color the icon.

.actions svg path { color: lime; }

Upvotes: 2

Related Questions