Я не могу заставить свои значки с потрясающим шрифтом отображаться. Пробовал импортировать css несколькими способами

Я создаю портфолио веб-сайта, используя шаблон 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>

html css font-awesome font-awesome-5
person Kenny Workman    schedule 08.01.2019    source источник
comment
Находятся ли ваши файлы шрифтов (woff, ttf) в том же каталоге, что и CSS? Также вы можете попробовать заменить, например. class="icon fa-search" с class="icon fa fa-search"   -  person elveti    schedule 08.01.2019
comment
Откройте консоль и найдите красные линии, сообщающие об отсутствующих файлах шрифтов. all.css предполагает, что файлы шрифтов находятся там с тем же относительным путем, что и в том, что вы скачали с веб-сайта fontawesome.   -  person tao    schedule 08.01.2019
comment
Да, они находятся в одном каталоге. Пробовал эти модификации безрезультатно.   -  person Kenny Workman    schedule 08.01.2019

Ответы (3)


arrow_upward
3
arrow_downward

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

ul a {
  text-decoration:none;
  font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/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, поскольку все они относятся к пакету PRO2, поэтому они не будут отображаться.

ul a {
  text-decoration:none;
  font-size:25px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/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, поэтому нет возможности использовать этот значок с бесплатным пакетом:

введите здесь описание изображения

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

введите здесь описание изображения

Связанные вопросы:

Font Awesome 5 на псевдоэлементах показывает квадрат вместо значка

Font Awesome 5 Выбор правильного семейства шрифтов в псевдоэлементах

person Temani Afif    schedule 08.01.2019
comment
Спасибо! Казалось, это помогло им появиться. Через два из них проходят причудливые черные линии, которые исчезают при активации анимации .js... Есть идеи, что это такое? - person Kenny Workman; 08.01.2019
comment
@KennyWorkman, вероятно, задействовано больше CSS? Вы можете создать скрипку со всем своим кодом? - person Temani Afif; 08.01.2019

arrow_upward
0
arrow_downward

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

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

arrow_upward
0
arrow_downward

Сохраните файлы шрифта в вашем локальном каталоге (asset/fontawesome). Затем загрузите шрифт шрифта со статическим

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

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

person Akinniyi Bode Bolade    schedule 08.01.2019