font awesome квадраты вместо иконок

Главное меню » Информация » Шрифт Awesome 5 не отображает иконки

1. Убедитесь, что вы правильно связываетесь с Font Awesome 5 CDN в «заголовке» вашего документа

Бесплатно

ВЕБ-ШРИФТЫ И CSS

SVG & JS

Профессионал

Для этого вам понадобится Профессиональная лицензия, затем вы примените собственный домен для работы CDN.

ВЕБ-ШРИФТЫ И CSS

SVG & JS

Последние выпуски отображаются во время публикации.

2. Убедитесь, что вы вызываете правильный Font Awesome CSS и обладаете необходимыми привилегиями.

Font Awesome 5 разделен на Solid, Regular, Light, Brands, и их можно применять только на следующих уровнях:

Стиль иконки	Доступность
solid	Свободно
regular	Только pro
Light	Только pro
Brands	Свободно

Так, например, вы не можете отображать значки в Regular или Light, если вы используете Font Awesome Free.

3. Убедитесь, что ваш формат Unicode правильный

обратите внимание, это не то что ‘/f077′

4. Убедитесь, что у вас есть правильное семейство Font Awesome Font в вашем CSS

Если у вас есть правильный файл/привилегии (как указано выше), убедитесь, что ваш элемент покрыт правильным семейством шрифтов Awesome Font.

Бесплатно

Профессионал

Выше приведены общие семейства шрифтов для Font Awesome 5, но вы также можете вызывать определенные стили Font Awesome 5 (Solid, Regular, Light, Brands):

Бесплатно

Профессионал

Обратите внимание, что, как указано выше, стиль «Brands», похоже, не соответствует соглашению об именовании Font Awesome, и в обеих версиях Basic и Pro эти значки имеют семейство шрифтов «Font Awesome 5 Brands». Например, если вы хотите показать иконку Font Awesome на Facebook, вам следует применить стиль «Font Awesome 5 Brands»:

5. Добавьте больший вес шрифта

Интересно, что многие браузеры будут отображать пустое поле, если вы не используете Font Weight более 600, поэтому добавьте следующее в свой CSS

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Столкнулся с такой проблемой: на сайт подключил иконки Font-Awesome, но вместо самих иконок отображаются квадраты вот такого рода:

Файл css подключен и в нем все шрифты подключены корректно (все пути верно указаны), в чем может быть проблема и как её исправить? Заранее благодарю!

2 ответа 2

Нужно правильно прописывать классы Font Awesome

для v5

для v4

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

Можете изобразить дерево вашего сайта(расположение файлов)?

Сентябрь 26, 2016

Значки Font Awesome не отображаются локально, если они не размещены на CDN .

Вы не используете плагины/расширения, которые подгружают более старую/модифицированную версию Font Awesome;

Ваша панель разработчика браузера указывает, что Вы загружаете правильные файлы шрифтов;

Расширения вашего браузера не блокируют веб-шрифты (noscript, adblockplus и т.д.);

Ваша операционная система не блокирует веб-шрифты (Групповая политика Microsoft).

Если значки Font Awesome отображаются как квадратики, просто добавьте следующий фрагмент кода в ваш файл стилей:

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

Обратите внимание, лучше использовать конкретные классы CSS, для того чтобы не применить изменения глобально.

Если значки Font Awesome не отображаются только в Firefox/IE, добавьте следующий фрагмент кода в файл . htaccess :

Обратите внимание на нашу коллекцию высококачественных Веб-шаблонов, если Вам нужно больше шаблонов!

Вы можете также ознакомиться с детальным видео-туториалом ниже: