Categories: Wordpress - как сделать

Как использовать Font Awesome на WordPress сайте без плагина

В одной из предыдущих статей мы писали об использовании иконочных шрифтов как одном из способов достижения адаптивности картинок на сайте. Здесь ссылка на эту статью. И сегодня мы поговорим об одном из самых популярных иконочных шрифтов – Font Awesome. Сегодня мы на практике посмотрим, как подключить Font Awesome на сайте на движке WordPress без использования плагина и как использовать этот шрифт.

Что такое Font Awesome и в чем его преимущество?

Иконочный шрифт Font Awesome – это шрифт, созданный с помощью значков (иконок), но это ни в коем случае не набор картинок. Почему это различие так важно? Поскольку шрифт Font Awesome:

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

Значки Font Awesome используются на сайтах как обычные шрифты: их можно стилизовать и манипулировать ими так же, как и обычными шрифтовыми символами, используя CSS свойства как @font-face, font-family, font-size, и т.д. Благодаря этому вам не придется беспокоиться о размерах или отступах под отдельные браузеры или размеры экранов.

В настоящее время Font Awesome предлагает набор из более 2000 различных и бесплатных иконок, которые вы можете добавить практически в любом месте на своем WordPress сайте. Если вам мало такого количества иконок, то переходите на платное Pro (всех иконок больше 53000!).

Как добавить Font Awesome в WordPress вручную (без плагина)

Добавить шрифт Font Awesome на сайт WordPress вручную довольно легко. Этот процесс состоит из 2-х частей: во-первых, нужно подключить файл стилей этого шрифта в секции <head>, во-вторых, в исходном коде (в шаблоне, или в режиме Текст редактора в Консоли) использовать определенный класс для нужной иконки.

1-й этап: подключение файла стилей шрифта Font Awesome

Первым шагом является добавление CSS-стилей Font Awesome в шаблон header.php активной темы. Добавьте код подключения файла CSS-стилей в секцию <head>:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

Этот код подключит файл с таблицей стилей Font Awesome из репозитория Bootstrap по CDN. Вы также можете непосредственно скачать файл стилей с официального сайта Font Awesome (https://fontawesome.com/) и подключить его со своей темы.

Более предпочтительный вариант подключения не только стилей, но и скриптов, заключается в использовании специальной функции подключения в файле functions.php активной темы. Вместо того, чтобы редактировать файл header.php, добавьте следующий код в файл functions.php активной темы:

function load_font_awesome() {
  wp_enqueue_style( 'font-awesome-style', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' );
}
add_action( 'wp_enqueue_scripts', 'load_font_awesome' );

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

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

Чтобы найти полный список иконок, перейдите на официальный сайт Font Awesome в раздел меню Icons и выберите нужный значок. Например, если вы хотите добавить иконку с «пальцем вверх», найдите иконку «thumbs-up» (https://fontawesome.com/icons/thumbs-up?style=regular).

У каждой иконки есть своя страничка, на которой вы можете увидеть приблизительный вид иконки при разных размерах, узнать код Unicode, а также можете скачать иконку в формате SVG. Наибольший интерес в данный момент для нас представляет пример кода для вставки иконки. Например, для иконки с «пальцем вверх», пример кода будет следующим:

<i class="fa fa-thumbs-o-up"></i>

ВАЖНО! Учтите, что в нашем примере мы используем версию шрифта 4.7.0. На данный момент самой последней версией является версия 6.7.2, и в ней используется другой формат классов. Например, выше указанная иконка подключается в формате <i class="far fa-thumbs-up"></i>. И совсем скоро появится версия 7! Следовательно, нужно этот момент отслеживать.

Иконки в формате версии 4.7.0 вы можете посмотреть здесь: https://fontawesome.com/v4.7.0/icons/

После того как вы выбрали иконку, скопируйте код для ее подключения и вставьте в нужном месте. Это может быть любой файл шаблон в активной теме. Либо вы можете вставлять иконки через Консоль. При редактировании поста/страницы в режиме Текст добавьте нужный класс для тега i (или, например, тега span).

При использовании файла стилей Font Awesome разных версий синтаксис формата класса будет разным:

<i class="fa {код иконки}"></i>  <!-- синтаксис версий 4.x.x -->
<i class="fas {код иконки}"></i> <!-- синтаксис версий 5.x.x -->
<i class="far {код иконки}"></i> <!-- пример: стиль regular иконки версии 5.x.x -->
<i class="fal {код иконки}"></i> <!-- пример: стиль light иконки версии 5.x.x -->

Краткий итог

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

Напишите в комментариях свое отношение к использованию Font Awesome, а также поделитесь своими впечатлениями, если вы используете версии 6.x.x этого шрифта.