Вот шаги, чтобы проверить, не отображаются ли значки Font Awesome 5 (как правило, с пустыми рамками) вместе с реализациями Font Awesome 5 для Web Font CSS и SVG JS:
1. Убедитесь, что вы правильно связываетесь с Font Awesome 5 CDN в «заголовке» вашего документа
Как подключить Font Awesome 5 различными способами.
Бесплатно
ВЕБ-ШРИФТЫ И CSS
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
SVG & JS
<script defer src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
Профессионал
Для этого вам понадобится Профессиональная лицензия, затем вы примените собственный домен для работы CDN.
ВЕБ-ШРИФТЫ И CSS
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.1.0/css/all.css">
SVG & JS
<script defer src="https://pro.fontawesome.com/releases/v5.1.0/js/all.js"></script>
Последние выпуски отображаются во время публикации.
2. Убедитесь, что вы вызываете правильный Font Awesome CSS и обладаете необходимыми привилегиями.
Font Awesome 5 разделен на Solid, Regular, Light, Brands, и их можно применять только на следующих уровнях:
| Стиль иконки | Доступность |
|---|---|
| solid | Свободно |
| regular | Только pro |
| Light | Только pro |
| Brands | Свободно |
Так, например, вы не можете отображать значки в Regular или Light, если вы используете Font Awesome Free.
3. Убедитесь, что ваш формат Unicode правильный
.something:before {
font-family: "Font Awesome 5 Free"; content: '\f077'; font-weight: 600; }
обратите внимание, это не то что ‘/f077′
4. Убедитесь, что у вас есть правильное семейство Font Awesome Font в вашем CSS
Если у вас есть правильный файл/привилегии (как указано выше), убедитесь, что ваш элемент покрыт правильным семейством шрифтов Awesome Font.
Бесплатно
font-family: "Font Awesome 5 Free";
Профессионал
font-family: "Font Awesome 5 Pro";
Выше приведены общие семейства шрифтов для Font Awesome 5, но вы также можете вызывать определенные стили Font Awesome 5 (Solid, Regular, Light, Brands):
Бесплатно
font-family: "Font Awesome 5 Free Solid"; /* Solid */ font-family: "Font Awesome 5 Brands"; /* Brands */
Профессионал
font-family: "Font Awesome 5 Pro"; /* Solid, Regular, Light */ font-family: "Font Awesome 5 Pro Regular"; /* Regular */ font-family: "Font Awesome 5 Pro Light"; /* Light */ font-family: "Font Awesome 5 Brands"; /* Brands */
Обратите внимание, что, как указано выше, стиль «Brands», похоже, не соответствует соглашению об именовании Font Awesome, и в обеих версиях Basic и Pro эти значки имеют семейство шрифтов «Font Awesome 5 Brands». Например, если вы хотите показать иконку Font Awesome на Facebook, вам следует применить стиль «Font Awesome 5 Brands»:
.facebook:before {
font-family: "Font Awesome 5 Brands";
content: '\f39e';
font-weight: 600;
}
5. Добавьте больший вес шрифта
Интересно, что многие браузеры будут отображать пустое поле, если вы не используете Font Weight более 600, поэтому добавьте следующее в свой CSS
font-weight: 600;
или больше:
font-weight: 900;