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 цього шрифту.