В одній з попередніх статей ми писали про використання іконочних шрифтів як один із способів досягнення адаптивності картинок на сайті. Тут посилання на цю статтю. І сьогодні ми поговоримо про один з найпопулярніших іконочних шрифтів – Font Awesome. Сьогодні ми на практиці подивимося, як підключити Font Awesome на сайті на двигуні WordPress без використання плагіна і як використовувати цей шрифт.
Іконочний шрифт Font Awesome – це шрифт, що створений за допомогою значків (іконок), але це ні в якому разі не набір картинок. Чому ця різниця така важлива? Оскільки шрифт Font Awesome:
Значки Font Awesome використовуються на сайтах як звичайні шрифти: їх можна стилізувати та маніпулювати ними так само, як і звичайними шрифтовими символами, використовуючи CSS властивості як @font-face, font-family, font-size, тощо. Завдяки цьому вам не доведеться турбуватися про розмір чи відступи під окремі браузери, чи розміри екранів.
На даний час Font Awesome пропонує набір з більше ніж 2000 різних і безкоштовних іконок, які ви можете додати практично в будь-якому місці на своєму WordPress сайті. Якщо вам мало такої кількості іконок, тоді переходьте на платне Pro (всіх іконок більше 53000!).
Додати шрифт 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 в розділ меню 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 цього шрифту.
Цей практичний урок допоможе вам перенести дані з вашого Excel-файлу (з деякими конкретними стовпцями) до…
Досить часто у програмістів виникає спокуса написати якусь велику функцію, що повинна вирішувати певну задачу.…
Дискусії навколо цієї теми вас, певно, вже втомили. Але я в даній статті постараюсь показати…
Консоль браузера (також відома як консоль JavaScript або веб-консоль), — це потужний інструмент для розробників,…
Ніколи не вказуйте на помилки, якщо не знаєте, як їх виправити Джордж Бернард Шоу
Коли необхідно зробити вибір, а ви його не робите, — це теж вибір Вільям Джеймс…