cssreactjscolorsfont-awesomecentralized

Fortawesome reactjs icon colors in css

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"/>
Solution

  • 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

    Edit muddy-lake-osyi8