material-ui按钮中的字体真棒图标

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

您可以使用Material-UI 中的Icon组件来使用图标

前任：

<Button
 style={{
 backgroundColor: "#5cb85c",
 color: "white"
 }}
 >
  <Icon className={classNames(classes.icon, "fa fa-plus-circle")} />
</Button>

这是一个工作示例：https : //codesandbox.io/s/ly4n0z2oz9

你可以使用 font-awesome 作为

npm install --save font-awesome

import "font-awesome/css/font-awesome.css";

如该线程中所述：https : //github.com/facebook/create-react-app/issues/2872

Answer 2

好吧，我不确定您是否已阅读过字体真棒的官方指南/文档，但他们建议您使用“ 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)

来自上面提供的链接。

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