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

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

 

 

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

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

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

 

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

 

 

Как добавить 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. На данный момент самой последней версией является версия 5.1.0, и в ней используется другой формат классов. Например, выше указанная иконка подключается в формате <i class="far fa-thumbs-up"></i>.

Иконки в формате версии 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, а также поделитесь своими впечатлениями, если вы используете версии 5.x.x этого шрифта.

 

Recent Posts

Ошо

Уже поздно возвращаться назад, чтобы все правильно начать, но еще не поздно устремиться вперед, чтобы… Read More

23/05/2021

Шпаргалка по временным формам глагола в английском языке

В английском языке очень сложная система времен (временные формы глагола – Verb Tenses), которая относится… Read More

17/05/2021

Теория цвета – советы для вдохновения веб-дизайнерам

Вы когда-нибудь задумывались о том, как веб-дизайнеры подбирают идеальное сочетание цветов? Интересовались тем, какие цвета… Read More

30/04/2021

Как стать фрилансером – действенные советы

Фриланс – это возможность спокойно и размеренно работать дома, не обращая внимания на окружающее пространство,… Read More

27/04/2021

Самые красивые каньоны со всего мира (часть 1/2)

На протяжении многих сотен тысяч, или даже миллионов лет, быстрое течение рек подтачивало и вымывало… Read More

27/04/2021

Уильям Шекспир

Грехи других судить вы так усердно рветесь, начните со своих и до чужих не доберетесь… Read More

18/04/2021