如何在模块化css React中更改fontawesome图标的颜色答案

【问题标题】：How to change color of fontawesome icons in modular css React如何在模块化css React中更改fontawesome图标的颜色
【发布时间】：2019-01-09 22:56:44
【问题描述】：

这是<MessageHeader />组件的文件夹结构。

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;

这是 icons.js 文件

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

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

export {
    fa,
    fa_question
}

现在我想添加这个：

.fa-question {
    color: white
  }

我该怎么做。请帮助我是反应生态系统的新手。

【问题讨论】：

你可以直接指定使用类名或样式likw <span className="fa fa-tachometer" style={{color: #87B87F}}></span>
这就是你应该如何使用它：link

标签： reactjs font-awesome

【解决方案1】：

我假设您使用create-react-app 来创建您的项目。您可以在您的项目上创建一个 style.css 文件（例如，在 icon.js 文件旁边），然后将其导入您的项目。

import "./style.css";

您也可以使用评论中提到的 Revansiddh 的内联样式。

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

【讨论】：