Шрифт Font Awesome Підключення на WordPress та застосування
Дизайн сайту будується на багатьох речах: колір, оформлення, стиль та, звичайно ж, веб-іконки. Вони одушевляють неживе, тобто якщо взяти порожній графічний квадрат, то він небагатий змістом, а якщо до нього додати веб-іконку, наприклад конверт, то це вже буде покажчик зі значенням. У просторах інтернету можна знайти сотні сайтів із вихідними іконками або спеціальні сервіси з пошуком веб-іконок.
Але, крім іншого, є можливість добути іконки іншим шляхом, про що зараз і йтиметься. Мається на увазі шрифт Font Awesome – це Клондайк веб-іконок чисельність яких понад 450 шт. Плюсом є не лише кількість, а й зручність у застосуванні. А також можна підкреслити векторне значення, що при зміні розміру іконки, якість не псується.
Підключаємо шрифт Font Awesome на WordPress
Процедура досить стандартна і встановлюється буквально за кілька кроків. Насамперед завантажуємо шрифт Font Awesome з сайту розробників. У завантаженому файлі ви знайдете ZIP архів. Витягуємо з архіву вміст, у ньому знаходиться папка з назвою шрифту та актуальною на даний момент версією. В основній папці є ще підпапки: стилі, шрифти тощо.
Другою дією є завантаження шрифту Font Awesome на хостинг. Підключіться до сайту через будь-який FTP – клієнт та закиньте раніше завантажену папку у встановлену вами тему.
Останнє, що залишилося зробити - це підключити стилі. Одна з підпапок носить назву CSS в ньому знаходиться два файли: font-awesome.css, font-awesome.min.css вони однакові, різниця лише у форматуванні. У цих файлах задані всі необхідні стилі та імпорт шрифту. Ось чому необхідно підключити один із них. Відкрийте файл header.php таміж тегами підключіть стилі.
Головне, вкажіть відносний шлях, якщо змінюєте назву папок, то не забуваємо міняти і підключення стилів.
Спосіб №2
А можна піти дуже простим шляхом і підключити шрифт Font Awesome не завантажуючи собі на сайт, а імпортувати безпосередньо (підключення CDN). Для цього у файлі functions.php вставте наступний код:
Щоб не виникла помилка, вставляйте код в кінці перед знаком ?> .
Приклади використання шрифту Font Awesome
Після підключення шрифту на WordPress стають доступними всі можливості. Як згадувалося вище про кількість іконок, то з повним каталогом можете ознайомитися за посиланням . При натисканні на одну з іконок ви побачите відповідний її клас для застосування.
HTML
CSS
Для оформлення іконки використовуйте її клас як показано в прикладі та сміливо змінюйте колір, розмір розташування тощо.
Є ще одна особливість. Адже завжди зручно додавати іконку так, як показано вище, через тег. Можна використовувати Unicode, додаючи основному класу псевдоелемент і виводити іконку через content: ""; .
HTML
CSS
Зверніть увагу на два перші рядки у класі з псевдоелементом (.e1: before). У першій задається Unicode, а в другій назва шрифту. Це потрібно, щоб елемент не привласнив шрифт від свого батька. Повний список Unicode знаходиться за посиланням. Просто копіюйте іконку та вставляйте між лапками в content: ""; .