在 Gatsby 中使用 Bulma 未显示 Font Awesome 图标答案

【问题标题】：Font Awesome icons not showing up using Bulma in Gatsby在 Gatsby 中使用 Bulma 未显示 Font Awesome 图标
【发布时间】：2020-08-24 17:20:30
【问题描述】：

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

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 是否位于文件的正确部分，我只是尝试为我的主页按钮放置一个图标，如下所示：

“主页”左侧的间隙是我猜图标应该在的位置。对于图标未显示或显示为空白的原因，我将不胜感激。谢谢！

【问题讨论】：

标签： javascript html font-awesome gatsby bulma

【解决方案1】：

我自己也遇到了这个问题，所以在这里为任何正在寻找答案的人发帖。有几种方法可以使其工作，包括将图标用作带有库的组件，例如react-fontawesome。但是，如果您使用的是 Bulma，那么您很可能不想这样做，而是想使用类名。

所以先安装包：

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;

【讨论】：

这是正确的生产方法，效果很好！

【解决方案2】：

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

【讨论】：

这不是正确的方法，我建议任何阅读的人不要遵循这种方法。