TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

48

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

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

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

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

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

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

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

Значок шрифта 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, отображаемые в виде окна?

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

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

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

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

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

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

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

.li: перед {
content: "00A3 ″; семейство шрифтов: «FontAwesome»; шрифт: нормальный; }

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

.li: перед {
content: “00A3 ″; font-family: «Font Awesome 5 Free »; font-weight: 900 ; }

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

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

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

<i class = “fa fa-camera”>

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

6 Проверка толщины шрифта

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

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

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

Резюме

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

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

Источник записи: www.webnots.com

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