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

好吧，我不确定您是否阅读过字体真棒的官方指南/文档，但他们建议您使用“ 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项目中成功使用了它。如果您还有其他问题，请告诉我。

Answer 2

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

例如：

<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 3

如果仅使用Font Awesome中的几个SVG图标，则无需将整个FA库添加到项目中。

只需下载该SVG图标，然后在Google chrome中打开它，就可以了单击它以查看源代码。复制该图标的SVG路径，然后像这样将其粘贴到SVG图标按钮中：

<Tooltip title="GitHub ">
            <Button
              variant="fab"
              mini
              aria-label="GitHub"
              style={{ backgroundColor: "#4078c0", color: "#FFF" }}
              onClick={() =>
                window.open("https://github.com/hiteshsahu", "_blank")
              }
              className={classes.button}
            >
              <SvgIcon>
                <svg
                  aria-hidden="true"
                  data-prefix="fab"
                  data-icon="github-alt"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 480 512"
                >
                  <path
                    fill="currentColor"
                    d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"
                  />
                </svg>{" "}
              </SvgIcon>
            </Button>
          </Tooltip>

它将完美运行

Answer 4

按照有关https://fontawesome.com/how-to-use/on-the-web/using-with/react的说明。

根据Font Awesome的要求，他们要求将font-awesome-svg-core和free-solid-svg-icons导入App.js文件。

但是当在componenet中使用图标时，似乎对我没有帮助。所以，这就是我所使用的。我将以下文件导入了我的组件：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faFileDownload } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(faFileDownload)

导入上述文件和代码后，您可以通过这种方式向按钮添加图标

<Button
color='primary'
variant="contained">

<FontAwesomeIcon icon="file-download"/>
button_text

</Button>

Answer 5

对于字体超赞的品牌图标...花了我一些时间来弄清楚

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab, faGooglePlay } from '@fortawesome/free-brand-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(fab);

class FabTest extends Component{
      render(){
          return(
             <Button variant="contained" color="primary">
                  <FontAwesomeIcon icon={faGooglePlay}/>
                      <div>
                         <span> Get it on </span>
                          <p> PlayStore</p>
                      </div>
             </Button>
          )
      }
}

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

5 个答案: