Почему не отображаются иконки Font Awesome?

Question

Nikita @n_bott

Junior web-developer

Почему не отображаются иконки Font Awesome?

Здравствуйте. Подключил Font Awesome через link в html по инструкции с сайта.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<link rel="stylesheet" style="text/css" href="all.css">
</head>
<body>
	<i class="fas fa-ad">
	<p>Lorem ipsum dolor sit.</p>
</body>
</html>

Сами же файлы расположены в одной папке:

При загрузке в Firefox отображается только это:

В Safari:

Но в Chrome он отображается:

Вопрос задан более трёх лет назад
604 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

7 комментариев

Nikita @n_bott Автор вопроса

Закрыл тег, но ничего не изменилось

Написано более трёх лет назад
xdevelx @develx Куратор тега CSS

Nikita, Покажите, какие стили применяются для before

Написано более трёх лет назад
Nikita @n_bott Автор вопроса

xdevelx,

Написано более трёх лет назад
xdevelx @develx Куратор тега CSS

Nikita, А файл шрифта есть? И правильно ли путь прописан? Посмотрите во вкладке Сеть.

Написано более трёх лет назад
Nikita @n_bott Автор вопроса

xdevelx, Путь прописал правильно, так как в Chrome сама иконка отображается:

но в Firefox и Safari - ничего.

Написано более трёх лет назад

xdevelx @develx Куратор тега CSS

Nikita, Путь не до css, а для шрифта. В стилях подключаются шрифты

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.eot");
  src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.woff") format("woff"), url("../webfonts/fa-solid-900.ttf") format("truetype"), url("../webfonts/fa-solid-900.svg#fontawesome") format("svg"); }

Написано более трёх лет назад

Nikita @n_bott Автор вопроса

xdevelx, спасибо! Прописал путь для шрифт и всё заработало.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

4 комментария

Nikita @n_bott Автор вопроса

Значек написал правильно. И файлы лежат в одной папке. Я сейчас проверил в Chrome, там значёк отображается . Но в Firefox он так и не появился.

Написано более трёх лет назад
Andrew Kolomiets @Coolam

Nikita, а если не скачивать файлы? То есть воспользоваться ссылкой с сайта?

Написано более трёх лет назад
Andrew Kolomiets @Coolam

Nikita, нет, там не так, нужно просто ровно скачать файл и не менять название.

Написано более трёх лет назад
Nikita @n_bott Автор вопроса

Andrew Kolomiets, я не менял название самого css файла. Только скопировал файл all.css из скаченой папки с сайта в другую директорию, где находиться index.html.

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

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

HTML

+1 ещё

Простой
Как лучше сверстать элемент?
- 1 подписчик
- 2 часа назад
- 18 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как сделать плавное появление скрытых под display: none; карточек по клику на кнопку, при подключеной AOS?
- 1 подписчик
- 13 часов назад
- 76 просмотров
1

ответ
CSS

Простой
Как с помощью CSS при наведении курсора менять цвет рамки сразу у нескольких карточек?
- 1 подписчик
- вчера
- 71 просмотр
0

ответов
CSS

Простой
Как заменить плавно логотипы?
- 1 подписчик
- вчера
- 62 просмотра
1

ответ
HTML

Простой
Какая альтернатива AVIFS поддерживается в iOS?
- 1 подписчик
- 20 дек.
- 31 просмотр
1

ответ
CSS

Средний
Как сделать сквозную нумерацию неупорядоченных списков?
- 1 подписчик
- 20 дек.
- 69 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Как исправить вёрстку, чтобы блок с изображением не уезжал из-за блока с описанием?
- 1 подписчик
- 19 дек.
- 101 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Как загрузить img в первой очереди при загрузке страницы?
- 1 подписчик
- 19 дек.
- 93 просмотра
1

ответ
HTML

+1 ещё

Простой
Как с помощью регулярного выражения найти все теги?
- 1 подписчик
- 19 дек.
- 88 просмотров
2

ответа
HTML

+1 ещё

Простой
Можно ли задать стили внешнему тегу на основе вложенного?
- 1 подписчик
- 18 дек.
- 104 просмотра
1

ответ
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

CRM Bitrix24 разработчик

World Vision Clinic • Москва

от 170 000 ₽

Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT

23 дек. 2024, в 02:13

20000 руб./за проект

Собрать из исходного кода и запустить в докере рабочее приложение с бд

22 дек. 2024, в 22:57

500 руб./за проект

Аппликация для фильтра заказов

22 дек. 2024, в 20:40

10000 руб./за проект

Answer 1 · 2020-05-08 19:59:38

Только на сайте fontawesome тег i ещё и закрывается.
<i class="fab fa-accusoft"></i>
https://developer.mozilla.org/en-US/docs/Web/HTML/...

Tag omission
None, both the starting and ending tag are mandatory.

Если проверить разметку w3c валидатором, то увидите сразу ошибку. И браузеры могут неправильно трактовать невалидную вёрстку.

Answer 2 · 2020-05-08 19:51:58

Проверить нужно:
1. Правильность написания названия выбранного значка.
2. Лежит ли all.css там, где index.html
3. style не обязательно писать.
Проверьте, потыкайте, если не работает - отпишитесь.

Почему не отображаются иконки Font Awesome?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт