Fortawesome reactjs icon colors in css

Question

I have several Fontawesome tags spread across several components. Their color attribute is currently being hard-coded to a custom color HEX code. I want to centralize this color code in css, so that if needed I would just change it one place. Is this possible?

<FontAwesomeIcon icon={faThumbsUp} 
                        size="sm" color="#7ACC35"/>

You can create central class for that. In future if you want to update any specific style it will update from there. You dont have to worry about anywhere else. — Shubham Verma, Aug 26 '20 at 02:49

score 1 · Accepted Answer · answered Aug 26 '20 at 02:48

Yes you could do that, just use className and define your in css file

.CustomColor {
  color: red;
}

.CustomColor2 {
  color: green;
}

.CustomColor3 {
  color: blue;
}

<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor2" />
<FontAwesomeIcon icon={faCoffee} size="4x" className="CustomColor3" />

Codesandbox demo

Fortawesome reactjs icon colors in css

1 Answers1