How to change color of fontawesome icons in modular css React

Question

This is folder structure of <MessageHeader /> component.

import React, { Component } from 'react';
import style from '../css/MessageHeader.css';
import { fa, fa_question } from '../icons/icons';

    class MessageHeader extends Component {
        render(){
            return(

                <div className={style.container}>
                    <span className={[fa, fa_question].join(' ')} />
                </div>
            );
        }
    }

    export default MessageHeader;

This is icons.js file

import fontAwesome from 'font-awesome/css/font-awesome.css';

const { fa, 'fa-question':fa_question } = fontAwesome;

export {
    fa,
    fa_question
}

Now I want to add this:

.fa-question {
    color: white
  }

How do I do it . Please Help I am new to react ecosystem.

Answer 1

I assume that you are using create-react-app to create your project. you can create a style.css file on your project (next to icon.js file for example ) and then import it to your project.

import "./style.css";

also you can use inline style as Revansiddh mentioned in comment.

<span className={[fa, fa_question].join(' ')} style:{{color: "#FFF"}} />