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.

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.

• javascript
• html
• css
• reactjs
• font-awesome

• Only if you add inline SVG tag, you could use the fill property to change the color. – Kousika Ganesan Commented Sep 9, 2019 at 22:18

3 Answers 3

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

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

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

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