Font Awesome 图标在 Gatsby 中使用 Bulma 不显示

Question

我正在使用 Gatsby 和 Bulma 构建一个网站。在我的 Nav.js 文件中，我为网站顶部的按钮创建了一个通用格式，我有几个使用 Bulma 的按钮，我想在其中添加图标。我关闭了使用 Font Awesome 图标添加 Bulma 按钮的文档：https://bulma.io/documentation/elements/button/。我的代码完全相同，除了我将按钮包裹在 <a> 标记中以 link 标记到我网站的其他页面之外。我在文档中列出了包含的 <script> 文件以提供 Font Awesome 图标，我的代码如下所示：

const Nav = () => {
  return (
    <div style={{ margin: `3rem auto`, maxWidth: 650, padding: `0 1rem` }}>
    <nav>

    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>

        <p class="buttons is-outlined is-centered">
          <a href="/"><button class="button is-outlined"> <span class="icon">
          <i class="fas fa-home"></i>
          </span>
          <span>Home</span>
          </button></a>


          <a href="/projects"><button class="button is-outlined">Projects</button></a>

          <a href="/experience"><button class="button is-outlined">Experience</button></a>
        </p>

      </nav>
    </div>
  )
}

我不确定 script 是否位于文件的正确部分，我只是尝试为我的主页按钮放置一个图标，如下所示：

"Home" 左边的空隙是我猜应该是图标的地方。对于图标未显示或显示为空白的原因，我将不胜感激。谢谢！

Answer 1

在朋友的帮助下，解决问题的方法是将<script>标签放在项目的public/index.html文件中，然后精确复制并命名为index.html 并将其放入项目中的 static 文件夹中。这样，每次 Gatsby 服务器运行时，它都会在 public 存储库 中创建 index.html 文件的副本，并使用 字体 Awesome包含图标脚本。

Answer 2

我运行亲自解决了这个问题，所以在这里发帖给任何正在寻找答案的人。有几种方法可以让它工作，包括使用图标作为库的组件，例如 react-fontawesome。但是，如果您使用的是 Bulma，那么很可能您特别 不想这样做 ，而是想使用 class 名称。

所以首先安装包：

npm i @fortawesome/fontawesome-free

然后在您的 index.js / app.js / 您拥有的任何样式包装器组件中：

import '@fortawesome/fontawesome-free/css/all.min.css'

这是我面前的一个 Typescript 示例。这是一个包装器组件，它导入了我所有的全局样式供嵌套子组件使用：

import React from 'react';
import 'bulma/css/bulma.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import NavMenu from '../nav-menu';
import Footer from '../footer';
import './layout.css';

const Layout: React.FC<{ light: boolean }> = ({ light, children }) => {
    return (
        <div className="layout-wrapper">
            <NavMenu light={light} />
            {children}
            <Footer light={light} />
        </div>
    );
};

export default Layout;

Font Awesome 图标在 Gatsby 中使用 Bulma 不显示

Font Awesome icons not showing up using Bulma in Gatsby

html

javascript

font-awesome

gatsby

bulma