javascript 如何在 Gatsby 中使用诸如 Font Awesome 之类的图标
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46835145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use Icons like Font Awesome in Gatsby
提问by Jobeso
I want to use Font Awesome Icons in my Gatsby project. I would love to include font awesome with a CDN.
我想在我的 Gatsby 项目中使用 Font Awesome Icons。我很想在 CDN 中包含很棒的字体。
Just including it in a script tag doesn't work. I think I need to import it with import ... from '../fontawesome.css'but i am not able to get this working and also wanted to use a cdn for that. Or do I need to parse it with a css library for gatsby?
仅将其包含在脚本标记中是行不通的。我想我需要使用它来导入它，import ... from '../fontawesome.css'但我无法使其正常工作，并且还想为此使用 CDN。或者我是否需要使用 gatsby 的 css 库来解析它？
Please give me advice or hints how to do it.
请给我建议或提示如何做。
采纳答案by Alex Munoz
It's better to include every module that your application needs in just one JS. But if you still want to use CDN, just copy and edit the default template:
最好将您的应用程序需要的每个模块都包含在一个 JS 中。但是如果你仍然想使用CDN，只需复制并编辑默认模板：
cp .cache/default-html.js src/html.js
If you want to pack font-awesome in the project bundle, you may choose:
如果你想在项目包中打包 font-awesome，你可以选择：
- Use some react icon library. e.g. react-fontawesome
- Include the CSS files
- 使用一些反应图标库。例如react-fontawesome
- 包含 CSS 文件
For the last option, you must move the css and fonts in pages folder and then include fa in your js file.
对于最后一个选项，您必须移动 pages 文件夹中的 css 和字体，然后将 fa 包含在您的 js 文件中。
import './css/font-awesome.css'
To use a font-awesome class, use the className attribute
要使用字体很棒的类，请使用 className 属性
<i className="fa fa-twitter"></i>
If you are looking get the js code from a CDN, use Netlify
如果您想从 CDN 获取 js 代码，请使用Netlify
回答by sntnupl
For anyone visiting this page in late 2018+, I would highly recommend using react-icons.
对于 2018 年末访问此页面的任何人，我强烈建议使用react-icons。
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
回答by Waleed93
Here is the recommendedway to use Font-Awesomeicons in Gatsby:
以下是在 Gatsby 中使用Font-Awesome图标的推荐方法：
Add the following code snippet (mentioned in official react-fontawesome docs) in your higher components like Layoutor Page.
在您的更高组件中添加以下代码片段（在官方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)
First
npm install -Sandimportfree-brands-svg-icons or/ and free-solid-svg-icons only if you need icons from them.
First
npm install -S和importfree-brands-svg-icons 或/和 free-solid-svg-icons 仅当您需要它们的图标时。
Then in each component where to use icons, add the following code:
然后在每个组件中使用图标的地方，添加以下代码：
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
Now use it in your component like shown below:
现在在您的组件中使用它，如下所示：
<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />
<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />
I believe it is at this step where things go wrong. You need to include 'fab' in
iconprop 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 iniconprop instead of camelCase (checkSquare) and you don't need to include 'fa' in the beginning.
我相信正是在这一步出现问题。
icon如果您要添加品牌图标，则需要在道具中包含 'fab'，如上所示。否则，如果使用（比方说）实心图标，则只需输入图标的脊椎大小写（例如复选方块）样式名称，而无需 [] 将iconprop 中的括号括起来而不是驼峰式（checkSquare），并且您不需要包含 ' fa' 一开始。
