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

Question

我正在使用 Gatsby 和 Bulma 构建一个网站。在我的Nav.js文件中，我为网站顶部的按钮创建了通用格式，我有一些使用 Bulma 的按钮，我想在其中添加图标。我关闭了使用 Font Awesome Icons 添加 Bulma 按钮的文档：https://bulma.io/documentation/elements/button/。我的代码完全相同，除了我将按钮包装在标签中<a>以链接到网站中的其他页面之外。我<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放置在文件的正确部分，并且我只是尝试为我的主页按钮放置一个图标，如下所示：

我猜图标应该在“主页”左侧的间隙处。对于为什么图标没有显示或显示为空白的任何帮助，我将不胜感激。谢谢你！

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