Question

我想在Gatsby项目中使用Font Awesome Icons。我很想用CDN包含字体真棒。

将其包含在脚本标记中不起作用。我想我需要用import ... from '../fontawesome.css'导入它，但我无法使其工作，并且还想使用cdn。或者我需要使用gatsby的css库解析它吗？

请给我建议或提示如何做。

Answer 1

对于在2018年末以后访问此页面的任何人，我强烈建议使用react-icons。

import { FaBeer } from 'react-icons/fa';

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}

Answer 2

最好在一个JS中包含应用程序所需的每个模块。但如果您仍想使用CDN，只需复制并编辑默认模板：

cp .cache/default-html.js src/html.js

如果您想在项目包中打包font-awesome，可以选择：

使用一些反应图标库。例如react-fontawesome
包含CSS文件

对于最后一个选项，您必须在页面文件夹中移动css和字体，然后在您的js文件中包含fa。

import './css/font-awesome.css'

要使用font-awesome类，请使用className属性

<i className="fa fa-twitter"></i>

如果您正在寻找CDN的js代码，请使用Netlify

Answer 3

仅是最后评论的补充。您需要将array传递给icon道具的原因是因为FontAwesomeIcon组件中使用的默认前缀为fas。因此，如果您提供@fortawesome/free-solid-svg-icons中的图标（例如faHome），则无需添加前缀。

<FontAwesomeIcon icon={home} />

对于所有其他软件包，例如'@fortawesome/free-brands-svg-icons'您必须为指定前缀的图标提供数组

<FontAwesomeIcon icon={["fab", "laravel"]} />

另外，很高兴知道，您不需要将所有fab图标导入到库中。与实体图标（fas）一样，您可以仅导入所需的图标，然后将其添加到库中。像这样：

// fab icon (brand)    
import { faLaravel } from "@fortawesome/free-brands-svg-icons"
// fas icon (solid)
import { faHome } from "@fortawesome/free-solid-svg-icons"
library.add(faHome, faLaravel)

Answer 4

以下是在Gatsby中使用 Font-Awesome 图标的推荐方法：

在诸如Layout或Page之类的高级组件中添加以下代码段（在官方react-fontawesome docs中提到）。

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faCheckSquare, faCoffee  } from '@fortawesome/free-solid-svg-icons'

library.add(fab, faCheckSquare, faCoffee)

仅当您需要图标时，才使用第一个npm install -S和import自由品牌svg图标或/和free-solid-svg图标。

然后在每个使用图标的组件中，添加以下代码：

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"

现在在组件中使用它，如下所示：

<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />

我相信这是哪里出了问题。如果要添加品牌图标，则需要在icon属性中包含“ fab”，如上所示。否则，如果使用（比如说）实心图标，则只需输入图标的脊柱样式（例如，方格）样式名称，而无需将[]括在icon道具中的方括号内，而不是camelCase（checkSquare）无需在开头添加“ fa”。

Answer 5

最简单的解决方案是在 layout.js << strong>头盔>标签中添加超棒的脚本：

<Helmet>
    <html lang={site.lang} />
    <link
        rel="shortcut icon"
        type="image/x-icon"
        href={Favicon}
    ></link>
    {/* adding google fonts */}
    <link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet"/>
    {/* adding font-awesome icons */}
    <script src="https://kit.fontawesome.com/02130b3d51.js" crossorigin="anonymous"></script>
    <style type="text/css">{`${site.codeinjection_styles}`}</style>
    <body className={bodyClass} />
</Helmet>

现在，只需在喜欢的地方添加字体超棒的图标即可

<h2 onClick={scrollToBottom} style={buttonStyle} className="scroll-btn" aria-label="to bottom" component="span">
    {/* adding font-awesome icon */}
    <i class="fas fa-arrow-alt-circle-down"></i>
</h2>

就这么简单！

如何在Gatsby中使用Font Awesome等图标

5 个答案: