26

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

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

请给我建议或提示如何做到这一点。

4

5 回答 5

86

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

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

class Question extends React.Component {
    render() {
        return <h3> Lets go for a <FaBeer />? </h3>
    }
}
于 2018-11-10T12:03:55.710 回答
12

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

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

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

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

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

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

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

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

于 2017-10-23T12:05:52.190 回答
10

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

在您的高级组件中添加以下代码片段（在官方react-fontawesome 文档Layout中提到）或Page.

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和importfree-brands-svg-icons 或/和 free-solid-svg-icons 仅当您需要它们的图标时。

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

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

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

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

我相信正是在这一步出现问题。如果要添加品牌图标，则需要在道具中包含“fab”，icon如上所示。否则，如果使用（比方说）实心图标，则只需输入图标的脊柱大小写（例如方格）样式名称，而不用 [] 将括号括在iconprop 而不是 camelCase (checkSquare) 中，并且您不需要包含 ' fa' 开头。

于 2019-05-10T13:21:30.553 回答
1

只是对最后评论的补充。您需要传递一个arrayto属性的原因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)
于 2020-07-12T23:25:59.890 回答
0

最简单的解决方案是在layout.js < Helmet > 标签中添加 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>

现在简单地添加你喜欢的字体真棒图标：

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

真的就是这么简单！！

于 2020-10-07T11:55:54.927 回答