Іконки на сайті – Font Awesome

Іконки на сайті – Font Awesome
Коментарів: 0

Бачили значки телефона, скайпу, соцмереж на інших сайтах? Хочете такі ж? Як просто і – головне – безкоштовно під’єднати іконки на сайті, читайте далі.

Ще досить недавно всі іконки на сайті у мене були графічними зображеннями, які я завантажував у окрему теку на сервері, і давав на них посилання. Швидкий і надійний метод, але коли Вам потрібно використати на сайті величезну кількість іконок, Ви ризикуєте завалити відвідувачів великим трафіком, а це дуже не бажано – у нас досі 3G не в кожному селі тягне 😉

Ми маємо інший вихід із ситуації завдяки геніальній ідеї розробника Dave Gandy – замість величезної кількості зображень використати один-єдиний шрифт, у якому на момент написання статті закладено 675 іконок. Мова іде про шрифт Font Awesome.

Іконки на сайті – Font Awesome

Отже, ідемо на офіційний сайт Font Awesome та, не відходячи далеко від каси, відразу шукаємо наступну кнопку:

Іконки на сайті – Font Awesome

Далі нам пропонують два варіанти на вибір: або купити повний набір іконок, або скористатися обрізаним, зате безкоштовним набором. Наразі обираємо другий варіант, оскільки ми вперше тестуємо послугу, купити ще встигнемо 😉

Іконки на сайті – Font Awesome

Після даної дії на Ваш ґаджет повинен звантажитися zip-архів зі всіма потрібними файлами для під’єднання шрифта. Розархівовуємо все на наш сервер. Оскільки я переважно працюю із WordPress, то залив файли у папку із шаблоном, який розробляю в даний момент.

Тепер треба під’єднати файл стилів шрифта у Вашому CSS. Я це зробив за допомогою властивості @import у головному файлі стилів:

@import url('font-awesome/css/font-awesome.min.css');

А тепер поглянемо на прикладі іконки фотокамери, як можна легко вставити її на сайт:

Іконки на сайті – Font Awesome

Прямокутником нижче виділено код, який вставляється безпосередньо у HTML-код:

<i class="fa fa-camera-retro"></i> fa-camera-retro

І все – іконка вже відображається на Вашому сайті.

Але бувають випадки, коли HTML редагувати не бажано, а треба все зробити засобами CSS. В такому випадку дивимось на сайті, який код Unicode відповідає даній іконці, і прописуємо у псевдоелементі :before:

.icon-camera:before {
	content: "\f083";
}

Ніби не дуже складно. Зате до швидкодії сайті великий плюс. Ось так під’єднуються іконки на сайті за допомогою іконкового шрифта Font Awesome. Дякую, що дочитали, всього хорошого!

Якщо ви виявили орфографічну помилку, будь ласка, повідомте мені. Виділіть текст із помилкою та натисніть Ctrl+Enter.

Прокоментувати

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: