问Gatsby中没有使用Bulma的字体令人讨厌的图标
EN

Stack Overflow用户

提问于 2020-05-08 18:59:46

回答 2查看 2.8K关注 0票数 1

我正在建立一个使用盖茨比和布尔马的网站。在我的Nav.js文件中，我为网站顶部的按钮创建了一个通用格式，我有几个按钮使用Bulma，我想在其中添加图标。我从文档中删除了添加Bulma按钮和字体Awesome：https://bulma.io/documentation/elements/button/的文档。我的代码是完全一样的，另一个事实是，我的按钮包装在一个<a>标签中，链接到我网站中的其他页面。我在文档中列出了包含的<script>文件，以使Font可用，我的代码如下所示：

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按钮放置一个图标，如下所示：

“主页”左边的空隙是我猜图标应该在的地方。我将感谢任何帮助，为什么图标没有出现或正在出现空白。谢谢!

bulma

javascript

html

font-awesome

gatsby

向量数据库

传统知识库搭建耗时费力？腾讯云向量数据库 + Dify混合检索，轻松实现高效知识管理与精准问答！

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-05-08 19:19:31

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

票数 -2

Stack Overflow用户

发布于 2020-10-13 01:22:01

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

因此，首先安装软件包：

npm i @fortawesome/fontawesome-free

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

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

下面是我面前的一个打字稿例子。这是一个包装器组件，它导入嵌套子组件要使用的所有全局样式：

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;