Fatal编程技术网
  • javascript/
  • Javascript 如何在盖茨比中使用字体等图标

Javascript 如何在盖茨比中使用字体等图标

javascript reactjs gatsby

Javascript 如何在盖茨比中使用字体等图标,javascript,reactjs,gatsby,Javascript,Reactjs,Gatsby,我想在我的盖茨比项目中使用令人敬畏的字体图标。我想包括一个CDN字体真棒 仅仅将其包含在脚本标记中是行不通的。我想我需要用import导入它。。。来自“../fontawesome.css”但我无法实现这一点，还想使用cdn实现这一点。或者我需要用一个css库为盖茨比解析它吗 请给我一些建议或提示。最好将应用程序需要的每个模块都包含在一个JS中。但如果您仍要使用CDN，只需复制并编辑默认模板： cp .cache/default-html.js src/html.js 如果要在项目捆绑包中打包

我想在我的盖茨比项目中使用令人敬畏的字体图标。我想包括一个CDN字体真棒

仅仅将其包含在脚本标记中是行不通的。我想我需要用
import导入它。。。来自“../fontawesome.css”
但我无法实现这一点，还想使用cdn实现这一点。或者我需要用一个css库为盖茨比解析它吗

请给我一些建议或提示。最好将应用程序需要的每个模块都包含在一个JS中。但如果您仍要使用CDN，只需复制并编辑默认模板：

cp .cache/default-html.js src/html.js
如果要在项目捆绑包中打包font awesome，可以选择：

  • 使用一些图标库。e、 g
  • 包括CSS文件
对于最后一个选项，您必须移动页面文件夹中的css和字体，然后在js文件中包含fa

import './css/font-awesome.css'
要使用字体类，请使用className属性

<i className="fa fa-twitter"></i>
如果您希望从CDN获取js代码，请使用

对于2018年后期访问此页面的任何人，我强烈建议使用

从'react icons/fa'导入{FaBeer}；
类问题扩展了React.Component{
render（）{
回来让我们走一段时间？
}
}
以下是推荐的在盖茨比中使用字体Awesome图标的方法：

在更高的组件中添加以下代码段（在官方文件中提到），如
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安装-S
和
导入
免费品牌svg图标或/和免费实心svg图标（仅当您需要图标时）

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

从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}

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

我相信正是在这一步出了问题。如果您要添加品牌图标，则需要将“fab”包含在图标中，如上所示。否则，如果使用（比方说）实心图标，则只需输入图标的脊椎大小写（例如，复选框）样式名称，而不必在
图标
道具中使用[]括号，而不必在开头包含“fa”

只是对最后一条评论的补充。 您需要将
数组
传递给
图标
道具的原因是，FontaWebSomeIcon组件中使用的默认前缀是
fas
。因此，如果您从
@fortawesome/free solid svg icons
（例如faHome）提供图标，则无需添加前缀

<FontAwesomeIcon icon={home} />
另外，令人高兴的是，您不需要将所有
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标记中添加字体脚本：


{/*添加谷歌字体*/}
{/*添加字体图标*/}
{`${site.codeinjection\u styles}`}
现在，在您喜欢的地方添加简单的字体图标：

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


{/*正在添加字体图标*/}
真的就这么简单

“仅将其包含在脚本标记中是不起作用的。”我们很难帮助处理我们看不到的代码。使用react图标是另一个选项，其中包含来自字体Aware、材质设计、Github Octicons、，Ionicons和Typicons库。请注意，即使
react
仍然需要以某种方式链接或包含CSS文件。引用他们的NPM页面：“注意：这个组件不包括任何令人敬畏的字体CSS或字体，因此您需要确保以某种方式将它们包括在您的终端上，或者将它们添加到您的构建过程中，或者链接到CDN版本。”所以这不是一个真正的选择-
react
只处理react组件逻辑绝对是最简单的方法。简单而完美@sntnupi：使用此方法，我如何访问CSS中图标的unicode值。代码：
&:after{content:'\f0f2'；字体系列：'font-Awesome 5 Free'；
}不起作用。 
// 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)

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