НОВОСТИ

Як підключити Font Awesome локально на сайт?

Как подключить font awesome на сайте

Font Awesome – це онлайн-сервіс, створений Дейвом Ганді, який дозволяє з допомогою CSS використовувати на своєму сайті спеціальні Awesome шрифти – колекція іконок у форматі svg. Існує два способи підключити їх на сайт: віддалено – вказавши шлях до css файлу (розташованому на сервері Font Awesome) в шапці вашого сайту або локально – завантажити безкоштовно бібліотеку, помістити в директорію сайту і підключити її на сайті. Недолік першого варіанту у тому, що підключення зайвих стилів створює зайві з’єднання зі сторонніми серверами й тим самим гальмує завантаження веб-сторінки. Тому більш ефективним є другий спосіб – використовувати бібліотеку шрифтів Font Awesome локально. І у цій статті я розповім як правильно це зробити.

Підключення Font Awesome на сайті

1. Заходимо на офіційний веб-сайт Font Awesome й реєструємося, натискаємо “Start for Free”:

font-awesome

2. Переходимо на сторінку Hosting Font Awesome Yourself, де міститься технічний опис й інструкція. Натискаємо “Download Font Awesome Free for the Web” й скачуємо архів:

how-download-fontawesome

3. По FTP протоколу чи SSH завантажуємо архів у кореневу (або будь-яку іншу) директорію сайту. Розпаковуємо архів, переходимо в редагування шаблону сайта і перед тегом </header> додаємо код під’єднання CSS-файлу шрифтів:

<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

Готово. Тепер Font Awesome буде під’єднуватися на сайті локально.

Як використовувати Font Awesome?

Переходимо в галерею Font Awesome й обираємо будь-який значок з допомогою пошукового запиту:

icons-fontawesome-gallery

Далі клацаємо по обраній іконці і переходимо на сторінку детального перегляду, де натискаємо “Start Using This Icon”:

icon-fontawesome

Копіюємо код кнопки:

fontawesome-how-add

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

add-fontawesome-on-website

Зберігаємо зміни. Перезавантажуємо веб-сторінку без кешу (CTRL+F5) і перевіряємо. Якщо все зробили правильно – іконка Font Awesome повинна з’явитися. Наприклад, я використав значок ока для статистики переглядів:

fontawesome-how-add-eyeicon

Лайфхак: як в меню замість напису “Головна” використати іконку

Текст пункту меню “Головна” часто є зайвим і замість нього можна поставити стильну іконку. Для початку напис “Головна” потрібно видалити або приховати (дехто замість тексту ставить код пробілу “&#160“.

Тепер переходимо в код шаблону і застосовуємо CSS-псевдоелемент before – він виведе іконку перед написом “Головна”. А оскільки його немає, відобразиться лише іконка:

Ось готовий код:

li.item1 span:before {
font-family: 'Font Awesome 5 Free';
content: "\f015";
font-weight: 900;
font-size: 16px;
}

Результат:

Как вставить иконку вместо пункта меню

Які іще переваги дає Font Awesome?

  • Іконки дуже стильні, мало важать й постійно оновлюються, ідеально впишуться в дизайн будь-якого сайту
  • Font Awesome побудований на основі svg, що дозволяє змінювати розміри значків без втрати якості
  • Не впливає на швидкість завантаження сторінок (якщо використовувати локально)
  • Кросплатформність – усі браузери коректно відображають Font Awesome
  • Безкоштовність. Хоча існує й окрема комерційна PRO версія.
Оценка:
( 1 оцінка, середнє 5 з 5 )
Подписка на KRASHENININ.TECH

Получайте регулярные обновления на почту!


Виталий Крашенинин/ автор статті
Не забудьте поделиться материалом в соцсетях:
Krasheninin.tech - блог про веб-технології, і не тільки
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Есть мысли? Прокомментируй!x
()
x
Read previous post:
Sublime Text 3
Sublime Text 3: встановлення, налаштування, плагіни

Sublime Text 3 - кросплатформний редактор веб-коду, розроблений Джоном Спіннером у 2011 році, написаний на мовах програмування C ++ та...

Close