我想使用字体真棒图标在我的盖茨比项目。我很乐意包括字体真棒与CDN。仅仅把它包含在一个脚本标签中是不行的。我想我需要用import ... from '../fontawesome.css'导入它，但是我不能让它工作，我也想用cdn来做这个。或者我需要用盖茨比的css库来解析它吗？请给予我建议或提示如何做这件事。
import ... from '../fontawesome.css'
rjee0c151#
对于任何在2018年后期访问此页面的人，我强烈推荐使用react-icons。
import { FaBeer } from 'react-icons/fa'; class Question extends React.Component { render() { return <h3> Lets go for a <FaBeer />? </h3> } }
bpzcxfmw2#
最好将应用所需的每个模块都包含在一个JS中，但如果您仍然希望使用CDN，只需复制并编辑默认模板即可：
cp .cache/default-html.js src/html.js
如果您想将font-awesome打包到项目包中，您可以选择：
对于最后一个选项，您必须移动pages文件夹中的css和fonts，然后在js文件中包含fa。
import './css/font-awesome.css'
要使用font-awesome类，请使用className属性
<i className="fa fa-twitter"></i>
如果要从CDN获取js代码，请使用Netlify
k4ymrczo3#
以下是在Gatsby中使用Font-Awesome图标的推荐方法：在Layout或Page等高级组件中添加以下代码片段（在官方react-fontawesome docs中提到）。
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和import自由品牌svg-icons或/和自由实体svg-icons（仅当您需要它们的图标时）。然后在每个使用图标的组件中添加以下代码：import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"现在在组件中使用它，如下所示：<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />我相信这是在这一步的地方出错。你需要包括'晶圆厂'在icon prop 如上所示，如果你是添加品牌图标。否则，如果使用（比方说）实心图标，然后进入脊柱（例如，方格）样式的图标名称，在icon prop中没有[]括起括号，而不是camelCase（checkSquare）并且不需要在开头包含'fa'。
npm install -S
import
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />
icon
qeeaahzv4#
只是对上一条注解的补充。你需要传递一个array到icon属性的原因是因为FontAwesomeIcon组件中使用的默认前缀是fas。所以如果你从@fortawesome/free-solid-svg-icons提供图标（例如faHome），你不需要添加前缀。
array
fas
@fortawesome/free-solid-svg-icons
<FontAwesomeIcon icon={home} />
对于所有其他软件包，例如'@fortawesome/free-brands-svg-icons'，您必须为指定前缀的图标提供数组
'@fortawesome/free-brands-svg-icons'
<FontAwesomeIcon icon={["fab", "laravel"]} />
另外，很高兴知道的是，你不需要导入所有的fab图标到你的库中。与实心图标（“fas”）一样，你可以只导入你需要的图标，然后将它们添加到库中。
fab
// 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)
tjjdgumg5#
最简单的解决方案是在layout.js〈Helmet〉标记中添加字体令人敬畏的脚本：
<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 className="fas fa-arrow-alt-circle-down"></i> </h2>
就这么简单！！
5条答案
按热度按时间rjee0c151#
对于任何在2018年后期访问此页面的人，我强烈推荐使用react-icons。
bpzcxfmw2#
最好将应用所需的每个模块都包含在一个JS中，但如果您仍然希望使用CDN，只需复制并编辑默认模板即可：
如果您想将font-awesome打包到项目包中，您可以选择：
对于最后一个选项，您必须移动pages文件夹中的css和fonts，然后在js文件中包含fa。
要使用font-awesome类，请使用className属性
如果要从CDN获取js代码，请使用Netlify
k4ymrczo3#
以下是在Gatsby中使用Font-Awesome图标的推荐方法：
在
Layout或Page等高级组件中添加以下代码片段（在官方react-fontawesome docs中提到）。第一个
npm install -S和import自由品牌svg-icons或/和自由实体svg-icons（仅当您需要它们的图标时）。然后在每个使用图标的组件中添加以下代码：
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"现在在组件中使用它，如下所示：
<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />我相信这是在这一步的地方出错。你需要包括'晶圆厂'在
iconprop 如上所示，如果你是添加品牌图标。否则，如果使用（比方说）实心图标，然后进入脊柱（例如，方格）样式的图标名称，在iconprop中没有[]括起括号，而不是camelCase（checkSquare）并且不需要在开头包含'fa'。qeeaahzv4#
只是对上一条注解的补充。你需要传递一个
array到icon属性的原因是因为FontAwesomeIcon组件中使用的默认前缀是fas。所以如果你从@fortawesome/free-solid-svg-icons提供图标（例如faHome），你不需要添加前缀。对于所有其他软件包，例如
'@fortawesome/free-brands-svg-icons'，您必须为指定前缀的图标提供数组另外，很高兴知道的是，你不需要导入所有的
fab图标到你的库中。与实心图标（“fas”）一样，你可以只导入你需要的图标，然后将它们添加到库中。tjjdgumg5#
最简单的解决方案是在layout.js〈Helmet〉标记中添加字体令人敬畏的脚本：
现在添加简单，字体真棒图标在任何时候你喜欢：
就这么简单！！