Иконки Font Awesome не отображаются при использовании Bulma в Gatsby - PullRequest
Новая
       129

Иконки Font Awesome не отображаются при использовании Bulma в Gatsby

0 голосов
/ 09 мая 2020

Я создаю веб-сайт, используя Gatsby и Bulma. В моем Nav.js файле, где я создаю общий формат для кнопок в верхней части веб-сайта, у меня есть несколько кнопок с использованием Bulma, в которые я хотел бы добавить значки внутри. Я отказался от документации для добавления кнопок Bulma с иконками Font Awesome: 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 находится в правильном часть файла, и я только попытался поместить значок для моей кнопки «Домой», который выглядит так:

enter image description here

Разрыв слева в "Доме", как я предполагаю, должен быть значок. Я был бы признателен за любую помощь относительно того, почему значок не отображается или отображается пустым. Спасибо!

1 Ответ

0 голосов
/ 09 мая 2020

С помощью друга проблема была решена путем помещения тега <script> в файл public/index.html проекта, а затем создания его точной копии, присвоения имени index.html и помещения в static папка в проекте. Таким образом, каждый раз, когда сервер Gatsby запускается, он будет создавать копию файла index.html в репозитории public с скриптом Font Awesome Icon включенным .

...