[英]How to use Icons like Font Awesome in Gatsby
我想在我的 Gatsby 项目中使用 Font Awesome Icons。 我很想在 CDN 中包含很棒的字体。
仅将其包含在脚本标记中是行不通的。 我想我需要使用import ... from '../fontawesome.css'来导入它，但我无法import ... from '../fontawesome.css'工作，也想为此使用 cdn。 或者我是否需要使用 gatsby 的 css 库来解析它？
请给我建议或提示如何做。
对于 2018 年末访问此页面的任何人，我强烈建议使用react-icons 。
import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
render() {
return <h3> Lets go for a <FaBeer />? </h3>
}
}
最好将您的应用程序需要的每个模块都包含在一个 JS 中。 但是如果你仍然想使用CDN，只需复制并编辑默认模板：
cp .cache/default-html.js src/html.js
如果你想在项目包中打包 font-awesome，你可以选择：
对于最后一个选项，您必须移动 pages 文件夹中的 css 和字体，然后将 fa 包含在您的 js 文件中。
import './css/font-awesome.css'
要使用字体很棒的类，请使用 className 属性
<i className="fa fa-twitter"></i>
如果您正在寻找从 CDN 获取 js 代码，请使用Netlify
以下是在 Gatsby 中使用Font-Awesome图标的推荐方法：
在Layout或Page等高级组件中添加以下代码片段（在官方react-fontawesome 文档中提到）。
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并仅在需要来自 free-brands-svg-icons 或/和 free-solid-svg-icons 的图标时才import它们。
然后在每个组件中使用图标的地方，添加以下代码：
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
现在在您的组件中使用它，如下所示：
<FontAwesomeIcon icon={["fab", "apple"]} style={{color:"#000000"}} />
我相信正是在这一步出现问题。 如果您要添加品牌图标，则需要在
icon道具中包含“fab”，如上所示。 否则，如果使用（比方说）实心图标，则只需输入图标的脊椎大小写（例如复选方块）样式名称，而无需 [] 将icon道具中的括号括起来，而不是驼峰式（checkSquare），并且您不需要包含'fa' 开头。
只是对最后一条评论的补充。 您需要将array传递给icon prop 的原因是因为 FontAwesomeIcon 组件中使用的默认前缀是fas 。 因此，如果您提供来自@fortawesome/free-solid-svg-icons （例如 faHome） @fortawesome/free-solid-svg-icons ，则无需添加前缀。
<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)
最简单的解决方案是在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>
真的就是这么简单！！
如何使用字体真棒图标或 Bootstrap glyphicons 来充当复选框
[英]How to use font awesome icons or Bootstrap glyphicons to act like check box
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.