logo
Все курсыВсе курсы
ВебинарыРазобраться в ITРеферальная программаПолучить профессию в SkyproПолучить профессию в Skypro

Исправляем проблему: иконки Font Awesome отображаются как квадраты

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Во многих случаях данную проблему можно решить, проверив версию Font Awesome, которую вы используете в проекте. Для быстрой настройки дополните раздел <head> вашего HTML-документа следующей ссылкой CDN:

HTML
Скопировать код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">

Также стоит удостовериться, что вы используете нужные классы иконок. Например, код для иконки пользователя должен выглядеть так:

HTML
Скопировать код
<i class="fas fa-user"></i>

Не забывайте о возможных ограничениях, связанных с кросс-доменными запросами или Content Security Policy (CSP), которые могут помешать загрузке Font Awesome.

Важно корректно указать font-family в CSS файле как 'FontAwesome'. Любые неточности в путях или названиях в секции @font-face могут привести к непоказу иконок.

Советы по использованию классов и переопределению CSS

Использование классов для определенной версии

Font Awesome 5 принес изменения, включая новые префиксы: "fas" для обычных иконок и "fab" для брендовых иконок. Пример правильного использования:

HTML
Скопировать код
<!-- Так выглядит корректный синтаксис для Font Awesome 5+ -->
<i class="fas fa-camera"></i> <!-- Улыбайтесь! 📸 -->
<i class="fab fa-twitter"></i> <!-- Делитесь в Twitter! 🐦 -->

Переопределение стилей

Стили, заданные вами или полученные из внешних источников, могут конфликтовать с требуемыми стилями Font Awesome. Будьте особенно осторожны, применяя !important в свойстве content, чтобы не скрыть иконки.

CSS
Скопировать код
.icon::before {
  content: url('custom-image.jpg') !important; /* Это НЕ та иконка, которую вы ожидаете 👋 */
}

Указание корректных путей к шрифтам

Если вы размещаете Font Awesome самостоятельно, обновите пути к файлам шрифтов в font-awesome.less или sass так, чтобы они корректно отражали их реальное расположение:

scss
Скопировать код
// Указываем точное расположение шрифтов в SASS
$fa-font-path: "/path/to/font-awesome/fonts";

Проблемы совместимости и решения

Поддержка старых броузеров

Не отказывайте в поддержке Internet Explorer 7, несмотря на то, что он является "реликтом" в мире интернета. Можно создать отдельный CSS-файл, в котором будут установлены корректные значения font-weight и font-style в директиве @font-face:

CSS
Скопировать код
/* Даже для Internet Explorer 7 стоит уделить немного внимания! ❤️ */
@font-face {
    font-family: 'FontAwesome';
    src: url('path-to-font-awesome/fonts/fontawesome-webfont.eot');
    font-weight: normal;
    font-style: normal;
}

Сетевые проблемы и CDN

При использовании CDN вы становитесь зависимыми от его стабильности. Возможные проблемы в сети могут помешать корректной загрузке иконок.

HTML
Скопировать код
<!-- Помните: ваше недовольство может сорвать загрузку иконок через CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">

Обновление версий

Всегда используйте последнюю версию Font Awesome, чтобы быть в курсе всех новых иконок и обеспечивать совместимость (Обязательно, если хотите отображать самые свежие иконки 💎).

HTML
Скопировать код
<!-- Версия на момент написания, всегда проверяйте ее актуальность -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/vx.x.x/css/all.css">

Не забудьте также обновить переменные в sass или less для соответствия новейшей версии.

Визуализация

Markdown
Скопировать код
Заказано: [🧩🎨, 🧩🎵, 🧩🚀]
Получено: [⬜️, ⬜️, ⬜️]

Данный образец демонстрирует, что ожидаемые иконки не отображаются. Нам нужно найти подходящие 'кусочки'.

Markdown
Скопировать код
Проблемы:                 | Решения:
------------------------- | --------------------
**Некорректный CDN**      | Обновите **URL**
**Несоответствие версий** | Используйте актуальную **версию**
**Конфликтующий CSS**     | Проверьте **стили**

Исправив эти проблемы:

Markdown
Скопировать код
Заказано: [🧩🎨, 🧩🎵, 🧩🚀]
Получено: [🖼, 🎵, 🚀]

🛠 Теперь все иконки отображаются как надо.

Подсказки по устранению неполадок

Проверьте ваш HTML

Ошибки в HTML – обычная причина проблем. Сервис валидации W3C Markup помогает находить ошибки в тегах и атрибутах.

Решение проблем с CORS

Проблемы с Cross-Origin Resource Sharing (CORS) могут казаться запутанными, однако их решение критично для корректной работы ресурсов. Тщательно проверяйте серверные заголовки на наличие Access-Control-Allow-Origin:

Bash
Скопировать код
# Заголовки – это те, кто обеспечивает безопасность веб-содержимого
curl -I http://yourdomain.com/path/to/fontawesome/css

Полезные материалы

  1. Документация Font Awesome — официальная документация по настройке Font Awesome через менеджеры пакетов.
  2. Интеграция иконок FontAwesome в графику D3 – Stack Overflow — решения сообщества для интеграции иконок FontAwesome.
  3. Введение в Font Awesome — общее руководство по использованию иконок Font Awesome.
  4. Установка веса и стиля на @font-face — Smashing Magazine — детальное руководство о веб-шрифтах, важное для понимания CSS и Font Awesome.
  5. Font Awesome на BootstrapCDN — используйте CDN Font Awesome для быстрой интеграции.
  6. Сервис валидации W3C — инструмент для проверки HTML, который помогает исправить ошибки в коде и устранить неполадки с Font Awesome.
  7. Обмен ресурсами между источниками (CORS) – HTTP | MDN — информация об управлении CORS, влияющая на загрузку иконок Font Awesome.