如何在 Gatsby 中使用像 Font Awesome 这样的图标

Question

我想在我的 Gatsby 项目中使用 Font Awesome 图标。我很想在 CDN 中包含很棒的字体。

仅仅将它包含在脚本标记中是行不通的。我想我需要用 import ... from '../fontawesome.css' 导入它，但我无法让它工作，也想为此使用 cdn。还是我需要用 gatsby 的 css 库来解析它？

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

Answer 1

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

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

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

使用一些 React 图标库。例如react-fontawesome
包括 CSS 个文件

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

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

要使用超棒的字体 class，请使用 className 属性

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

如果您要从 CDN 获取 js 代码，请使用 Netlify

Answer 2

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

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

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

Answer 3

这里是推荐在 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)

First npm install -S and import free-brands-svg-icons or/ and free-solid-svg-icons only if you need icons from them.

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

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

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

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

I believe it is at this step where things go wrong. You need to include 'fab' in icon prop as shown above if you are adding brand icons. Otherwise if using (let say) solid icons, then just enter the spinal-case (e.g check-square) styled name of the icon without [] enclosing brackets in icon prop instead of camelCase (checkSquare) and you don't need to include 'fa' in the beginning.

Answer 4

只是对最后一条评论的补充。您需要将 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 5

最简单的解决办法是在layout.js<头盔>标签中添加font-awesome脚本：

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

现在只需在您喜欢的地方添加 font-awesome 图标：

<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 这样的图标

How to use Icons like Font Awesome in Gatsby

javascript

reactjs

gatsby