Как исправить значки Font Awesome, отображаемые как окно?

В веб-разработке обычно используются значки шрифтов в формате SVG вместо ввода символов с помощью escape-символов. Например, значки Font Awesome наиболее популярны из-за масштабируемости значков без потери качества. Однако, если вы не реализуете должным образом значки шрифтов, они будут отображаться в виде поля. Если у вас возникли проблемы со значками шрифтов, узнайте, как их исправить.

Использование иконок Font Awesome на веб-сайте

Есть два способа использовать значки шрифтов на вашем сайте. Один – использовать в теге HTML, а другой – использовать псевдоклассы CSS. В обоих методах вы должны связать исходный шрифт awesome CSS и разместить файлы шрифтов на своем сервере, чтобы к значкам можно было применить правильные стили. Ниже приведен пример использования font awesome в HTML:

Использование Font Awesome

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

Значок шрифта Sow Box
Значок шрифта Sow Box

Почему иконки Font Awesome отображаются в виде прямоугольника?

Чтобы вставить значок шрифта на свой сайт, необходимо следующее:

  • Разместите шрифты на своем сервере
  • Ссылка на правильный шрифт классная версия CSS
  • Нет конфликта со старой и новой версиями на одном сайте
  • Проверьте правильность семейства шрифтов
  • Используйте правильный класс CSS
  • Проверить толщину шрифта
  • Проверить код содержимого CSS

Давайте рассмотрим точку легкости подробнее.

1. Разместите шрифты на своем сервере

Чтобы использовать font awesome на своем веб-сайте, необходимо разместить файлы шрифтов в том же каталоге. Все гарнитуры веб-шрифтов должны быть доступны в папке «/ webfonts» и указаны в CSS, расположенном в папке «/ css».

В большинстве случаев тема или плагин, которые вы используете, установят все необходимые файлы CSS и шрифтов на ваш сервер. Это так, особенно когда вы используете WordPress для своего сайта.

2. Ссылка на правильную версию CSS

Font awesome был доступен бесплатно до версии 4.70. Однако, начиная с версии 5.0, доступны как бесплатная, так и профессиональная версии. Хотя версия 4.70 устарела, большинство бесплатных плагинов и тем по-прежнему используют 4.70 из-за унифицированного класса CSS и простоты использования. Однако в версии 5.0 есть бренды и твердые стили для бесплатных пользователей, и вы можете использовать all.css для включения обоих стилей.

Вы можете либо зарегистрироваться на сайте font awesome, чтобы получить комплект CDN, либо использовать Файлы CDN доступны в Cloudflare.

Получите Font Awesome CDN Kit
Получите Font Awesome CDN Kit

3. Конфликтующие версии CSS

Одна из проблем, с которыми мы столкнулись с сайтом WordPress, заключается в том, что плагин использовал версию 4.70, а тема – 5.0. Это вызывало конфликт из-за несовместимости классов CSS и кодов содержимого. Поэтому обязательно используйте последнюю версию 5.0 с правильным исходным файлом CSS на своем сайте.

Значки шрифтов отображаются в виде поля
Значки шрифтов отображаются в виде поля

4. Используйте правильное семейство шрифтов.

Чтобы использовать отличный шрифт с CSS, вы должны использовать правильное семейство шрифтов. Ниже представлен код CSS, использованный в версии 4.70.

.li: before {
содержание: ” 00A3 ″; семейство шрифтов: «FontAwesome»; font-weight: нормальный; }

Однако в версии 5.0 вместо значка будет отображаться поле. вы должны использовать следующий CSS с версией 5.0 бесплатной версии.

.li: before {
содержание: ” 00A3 ″; семейство шрифтов: “Font Awesome 5 Бесплатно«; font-weight: 900; }

Поэтому убедитесь, что вы используете правильное семейство шрифтов «Font Awesome 5 Free» в CSS. Кроме того, если вы используете значки социальных сетей, семейство шрифтов должно быть «Font Awesome 5 Brands». Это два семейства шрифтов, доступные для бесплатных пользователей.

5. Используйте правильный префикс стиля CSS.

Другая проблема заключается в том, что в версии 5.0 классы CSS отличаются от предыдущих версий. В версии 4.7 вы можете использовать префикс стиля fa, как показано ниже:

Однако это не будет работать с версией 5.0 и новее. Префикс стиля fa устарел, и вы должны использовать fas для твердых значков и fab для значков социального брендинга, таких как Facebook.

6. Проверьте толщину шрифта.

Font awesome версии 5.0 не поддерживает общее объявление «font-weight: normal» в CSS. Для отображения значка следует указать определенный вес шрифта.

7. Проверьте код содержимого CSS.

Последний пункт – убедиться, что код содержимого, используемый в CSS, правильный. Вы должны использовать один из доступных кодов из шрифт отличный сайт в псевдоэлементе CSS. Кроме того, убедитесь, что используется код в формате « f00d»; чтобы значок отображался правильно.

Резюме

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

Стиль Доступность Шрифт Вес Префикс стиля Шрифт Семья
Твердый Свободный 900 фас Font Awesome 5 Free или Font Awesome 5 Pro
Обычный Pro 400 далеко Шрифт Awesome 5 Pro
Свет Pro 300 упал Шрифт Awesome 5 Pro
Дуотон Pro 900 причуда Font Awesome 5 Duotone
Бренды Свободный 400 сказка Font Awesome 5 брендов

Похожие записи

Добавить комментарий

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