reactjs - Material-ui 按钮中的 Font Awesome 图标

Question

我想在我的material-ui Button 组件中使用fontawesome 图标。但我不能那样做。你知道为什么吗？ (我正在使用 React 和 React-admin 框架。)

import '../../../node_modules/font-awesome/css/font-awesome.min.css';
import Button from '@material-ui/core/Button';

....

<Button style={{
                    backgroundColor: '#5cb85c',
                    color: 'white'
                }}
                onClick={() => this.codeGenerate()}>
                <i className="fa fa-star"></i>
            </Button>

Answer 1

嗯，我不确定你是否读过 Font Awesome 的 official guide/documentation ，但他们建议使用 react-fontawesome。

https://github.com/FortAwesome/react-fontawesome

很简单:

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

取 self 上面提供的链接。

我已经在我的 Material UI 项目中成功使用了它。如果您还有其他问题，请告诉我。