Як використовувати іконки Font Awesome на вашому сайті WordPress

Бажаєте зробити ваш сайт ще привабливішим? Шрифтові іконки допоможуть прикрасити записи, сторінки або меню. І коли йдеться про шрифтові іконки, то не можна не згадати Шрифт Високий.

Дивіться також:

• Посібник з іконічних шрифтів у WordPress для новачків
• Додаємо шрифти для іконок у WordPress
• Як додати додатковий блок іконок у WordPress
• Як відобразити різні іконки для окремих рубрик
• WordPress плагіни для додавання шрифтів Google Fonts

Якщо ви хочете додати велику колекцію іконок Font Awesome на ваш сайт WordPress, читайте про два швидкі і прості способи, як додати їх на WordPress.

Що таке Font Awesome Icons та чим вони корисні?

Якщо ви використовуєте тему Divi, то, напевно, знайомі зі шрифтовими іконками від Elegant Icon Font, які є в комплекті з темою.

Font Awesome працює за таким же принципом – це шрифт, створений із іконок. Чи не набором картинок. Чому це уточнення важливе? Тому, що будь-які шрифтові іконки, як Font Awesome та Elegant Icon Font — це:

• Векторні іконки - Це означає, що вони добре виглядають незалежно від розміру відображення.
• Шрифти, що настроюються – Ви можете керувати ними як будь-якими іншими шрифтами. Змінюйте кольори, додавайте анімацію та багато іншого!
• Сумісні з будь-яким браузером – шрифтові іконки повинні добре працювати з будь-яким браузером.

На даний момент Font Awesome пропонує 675 різних іконок, які ви можете додати будь-де на вашому сайті WordPress. Він також сумісний із будь-якою темою WordPress.

1. Як додати Font Awesome на WordPress вручну

Додати Font Awesome на WordPress вручну легко, але якщо ви не хочете розбиратися з кодом, то одразу перейдіть до наступної частини.

Для використання Font Awesome вручну необхідно виконати два кроки. По-перше, вам потрібно додати таблицю стилів Font Awesome у хедер вашої теми. А потім потрібно знайти назву іконки, яку ви хочете додати, і вставити її за допомогою короткого сниппета коду.

Додавання Font Awesome в хедер теми

Першим кроком є ​​додавання таблиці стилів Font Awesome у хедер теми:

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

Цей код перенесе таблицю стилів до Font Awesome з Bootstrap CDN. Ви також можете завантажити таблицю стилів прямо з Font Awesome. Нема ніякої різниці.

Але ми не рекомендуємо вставляти цей код прямо у файл вашої теми header.php. Якщо ваша тема дозволяє додати кастомні скрипти в header.php з меню налаштувань, то краще скористатися цим варіантом:

Але якщо ваша тема не дозволяє цього зробити, то потрібно додати цей скрипт самостійно правильним чином (з точки зору WordPress), а саме, використовувати наступний код і вставити його в functions.php вашої теми (ще краще, якщо це буде functions.php дочірньої теми):

add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' );
function enqueue_load_fa() {
 
    wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' );
}

Вставляємо іконки Font Awesome

Коли ви додасте код на вашу тему, ви будете готові почати використовувати іконки Font Awesome скрізь.

Знайти повний список іконок можна на веб-сайті Font Awesome.

Наприклад, якщо ви шукаєте іконку "Download", то просто вводите в пошук "download" і вибираєте з доступних варіантів:

Після вибору іконки, що сподобалася, ви можете побачити екран з різними розмірами цієї іконки. У центрі екрана ви повинні помітити невеликий блок коду:

Вам потрібно скопіювати весь код вибраної іконки. Потім ви можете вставити цей код куди завгодно в WordPress, неважливо, який редактор ви для цього використовуєте. Просто переконайтеся, що ви вставляєте його, коли редактор переключено в режим "Текст":

Ви можете повернутися до візуальної вкладки після впровадження коду. Після публікації запису ви побачите свою іконку у фронтенді:

Як збільшити розмір іконки Font Awesome

Як ви бачите у прикладі зверху, іконки досить малі. Якщо вам потрібно їх збільшити, потрібно додати кілька рядків коду. Наприклад, щоб збільшити розмір іконок в два рази, вам потрібно додатиfa-2xв клас ікон.

Наприклад, ось початковий код іконки:

<i class="fa fa-download" aria-hidden="true"></i>

А ось код із збільшеною в 2 рази іконкою:

<i class="fa fa-download fa-2x" aria-hidden="true"></i>

У реальному житті іконка виглядатиме тепер так:

Ось список шматочків коду, які потрібно додати, щоб змінити розмір:

• fa-lg – збільшити на 33%
• fa-2x - Збільшити в 2 рази
• fa-3x - Збільшити в 3 рази
• fa-4x - ...
• fa-5x - … Ну ви зрозуміли!

Ви можете також робити інші круті штуки, наприклад, використовувати іконку Font Awesome як пункт у маркованому писку, додавати анімацію та багато іншого. На офіційному сайті Font Awesome ви можете знайти інструкціюяк можна міняти шрифтові іконки.

2. Як додати Font Awesome на WordPress за допомогою плагіна

Якщо вам не подобається попередній спосіб, ви можете встановити плагін. Існує безліч різних плагінів, де доступна ця функція, але одним із найпопулярніших є Краще шрифт Високий:

Ви можете спробувати використовувати й інші плагіни, але нам здається, що це найкраще з кількох причин:

• Він регулярно оновлюється. Це важливо, оскільки кілька популярних плагінів Font Awesome не оновлювалися роками.
• Автоматично імпортує новий набір іконок Font Awesome.
• Дозволяє вам додавати іконки через шорткод або той самий код, що ми використовували.

Для початку встановіть та активуйте плагін.

Він додасть новий розділ меню Налаштування → Better Font Awesome у вашій консолі. Вам не потрібно налаштовувати нічого, просто дотримуйтесь інструкцій, які надасть плагін:

Додавання іконок

Щоб додати іконки до записів, можна використовувати той же метод, який ми показували вам в ручній версії, або використовувати шорткод. Перевага використання шорткоду полягає в тому, що вам не потрібно змінювати вкладку Text у вашому редакторі.

Формат шорткоду, який вам потрібен:

[icon name="ІМ'Я"]

Де ІМ'Я – це назва іконки на веб-сайті Font Awesome:

Ви можете додати цей шорткод до Divi або у звичайний текстовий редактор WordPress. Ось приклад, де ми додали іконку через шорткод до текстового модуля під час використання Divi Visual Builder:

Visual Builder відображає це так:

Ви можете використовувати той самий шорткод у звичайному редакторі WordPress.

Якщо ви хочете змінити розмір вашої іконки за допомогою шорткоду, просто додайте тег класу з розміром іконки:

[icon name="ІМ'Я"class="fa-2x"]

Підсумки

От і все! Два різні способи додати векторні іконки Font Awesome на WordPress. Ми віддаємо перевагу ручному методу, оскільки він забирає менше часу і потім не потрібно хвилюватися про потенційну поломку плагіна.

Але якщо ви не хочете чіпати код теми, краще використовуйте плагін Краще шрифт Високий.

Тепер ваша черга! Ви використовуєте Font Awesome?

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/