Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 18.11.2022)
83460
осіб
278
літаків
261
гелікоптерів
2879
танків
5808
ББМ
1865
артилерія
209
ППО
393
РСЗВ
4366
машин
16
кораблі і катери
Як використовувати Font Awesome на WordPress сайті без плагіна

Як використовувати 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 цього шрифту.

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.