Значки Font Awesome не отображаются в Chrome с Bootstrap - PullRequest
Новая
       24

Значки Font Awesome не отображаются в Chrome с Bootstrap

1 голос
/ 10 июля 2019

По какой-то причине Font Awesome Icons не отображаются в Chrome, но работают в Firefox.

Я пытался изменить CDN, но тоже не работает. Проблема проявляется, когда я добавляю класс nav-link к ссылкам с иконками. Когда ссылки без класса, они не показывают проблем. 

  <nav class="menu">
    <ul class="menu-nav">
      <li class="nav-item">
        <a href="" class="nav-link">Home</a>
      </li>
      <li class="nav-item">
        <a href="about.html" class="nav-link">About me</a>
      </li>
      <li class="nav-item">
        <a href="work.html" class="nav-link">My Work</a>
      </li>
      <li class="nav-item">
        <a href="contact.html" class="nav-link">Contact</a>
      </li>
      <li class="nav-item social-links">
        <a
          href="#"
          target="_blank"
          class="nav-link social-link"
          ><i class="fab fa-linkedin fa-3x"></i
        ></a>
        <a
          href="#"
          class="nav-link social-link"
          target="_blank"
          ><i class="fab fa-github fa-3x"></i
        ></a>
        <a
          href="#"
          class="nav-link social-link"
          ><i class="far fa-envelope fa-3x"></i
        ></a>
      </li>
    </ul>
  </nav>

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Не используйте файлы CDN. скачайте файлы с сайта fontawosome "https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself". и импортируйте ссылки ниже в ваш HTML-файл.

<link rel="stylesheet" href="css/fontawesome.min.css"> <link rel="stylesheet" href="css/all.css">

и не забудьте добавить папку "webfonts" в папку с шаблонами.

0 голосов
/ 10 июля 2019

Убедитесь, что вы находитесь в правильной версии Font_Awesome и Bootstrap.Я создал скрипку с вашим примером и работает на Chrome:

enter image description here

<nav class="menu">
<ul class="menu-nav">
  <li class="nav-item">
    <a href="" class="nav-link">Home</a>
  </li>
  <li class="nav-item">
    <a href="about.html" class="nav-link">About me</a>
  </li>
  <li class="nav-item">
    <a href="work.html" class="nav-link">My Work</a>
  </li>
  <li class="nav-item">
    <a href="contact.html" class="nav-link">Contact</a>
  </li>
  <li class="nav-item social-links">
    <a
      href="#"
      target="_blank"
      class="nav-link social-link"
      ><i class="fab fa-linkedin fa-3x"></i
    ></a>
    <a
      href="#"
      class="nav-link social-link"
      target="_blank"
      ><i class="fab fa-github fa-3x"></i
    ></a>
    <a
      href="#"
      class="nav-link social-link"
      ><i class="far fa-envelope fa-3x"></i
    ></a>
  </li>
</ul>

...