Font-Awesome icons not changing color React

Question

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.

Answer 1

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

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

Answer 2

我找到了一种解决方法，如果我使用 css 定位path元素，并为它着色图标。

.actions svg path { color: lime; }

Answer 3

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