Я не могу найти свои потрясающие шрифты иконки. Пробовал импортировать CSS несколькими способами. Использование шаблона HTML

Question

Я создаю портфолио для сайта, используя шаблон HTML. У меня нет особого опыта работы с css, но после импорта файла css-файла с отличными шрифтами, как ссылки, так и файла в моем проекте django, значки отображаются в виде маленьких прямоугольников. Я знаю, что файл css распознается, потому что когда я его комментирую, ящики исчезают. Я думаю, что с CSS может происходить что-то более глубокое, чего я не понимаю.

Я подозреваю, что в главном файле CSS что-то происходит, если кто-то может мне помочь. Спасибо!

Вот код из шаблона:

<ul class="special">
    <li><i class="fab fa-pencil" title="Edit"></i></li>
    <li><a href="#" class="icon fa-search"><span class="label">Magnifier</span></a></li>
    <li><a href="#" class="icon fa-tablet"><span class="label">Tablet</span></a></li>
    <li><a href="#" class="icon fa-flask"><span class="label">Flask</span></a></li>
    <li><a href="#" class="icon fa-cog"><span class="label">Cog?</span></a></li>
</ul>

Вот что я импортировал:

 <link rel="stylesheet" type='text/css' href="{% static "css/main.css" %}" />
 <!-- <link rel="stylesheet" href="{% static "css/all.css" %}" > -->
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>

Answer 1

Вам нужно использовать класс fas, а карандаш не будет отображаться, поскольку он принадлежит ПРО-пакету ¹ (https://fontawesome.com/icons/pencil?style=solid)

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<ul class="special">
  <li><i class="fas fa-pencil" title="Edit"></i></li>
  <li><a href="#" class="fas fa-search"><span class="label">Magnifier</span></a></li>
  <li><a href="#" class="fas fa-tablet"><span class="label">Tablet</span></a></li>
  <li><a href="#" class="fas fa-flask"><span class="label">Flask</span></a></li>
  <li><a href="#" class="fas fa-cog"><span class="label">Cog?</span></a></li>
</ul>

Нельзя использовать обычную версию этих значков far, поскольку все они принадлежат пакету PRO ² , поэтому они не будут отображаться

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<ul class="special">
  <li><i class="far fa-pencil" title="Edit"></i></li>
  <li><a href="#" class="far fa-search"><span class="label">Magnifier</span></a></li>
  <li><a href="#" class="far fa-tablet"><span class="label">Tablet</span></a></li>
  <li><a href="#" class="far fa-flask"><span class="label">Flask</span></a></li>
  <li><a href="#" class="far fa-cog"><span class="label">Cog?</span></a></li>
</ul>

https://fontawesome.com/icons/tablet?style=regular

https://fontawesome.com/icons/search?style=regular

https://fontawesome.com/icons/flask?style=regular

https://fontawesome.com/icons/cog?style=regular

---

1 Как вы можете видеть ниже, все версии этого значка являются PRO, поэтому использовать этот значок с пакетом Free нет возможности:

2 Как вы можете видеть ниже, только сплошная версия не является PRO, поэтому только эта включена в бесплатный пакет в отличие от 2 других.

---

Похожие вопросы:

Шрифт Awesome показывает квадрат вместо значка при использовании непосредственно в CSS

FontAwesome - Выбор правильного семейства шрифтов в псевдоэлементах CSS

Answer 2

Храните потрясающие файлы в вашем локальном каталоге (asset / fontawesome) Затем загрузите fontawesome со статическим

<link rel="stylesheet" href="{% static 'css/font-awesome.min.css'%}">

Вы можете проверить этот репозиторий github здесь

Answer 3

Поместите его поверх всех CSS и попробуйте использовать без параметров целостности и перекрестного определения, потому что даже небольшое изменение разработчиками файла может не совпадать с целостностью и перекрестным происхождением, которые есть на вашем веб-сайте, поэтому он не будет использоваться.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">