НОВОЕ

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

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

Font Awesome — это онлайн-сервис, созданный веб-разработчиком Дэйвом Ганди. Позволяет каждому вебмастеру использовать на своем сайте открытые Awesome шрифты. Поставляется в виде коллекции иконок в формате svg. Существует два способа подключить их к сайту: удаленно — указав путь к css файлу (расположенному на сервере Font Awesome) в хедере вашего сайта или локально — скачать бесплатно библиотеку, загрузить в директорию сайта и использовать в коде. Первый вариант мне не подошел, так как подключение лишних стилей в шапке и так сильно тормозит загрузку веб-страниц, которая в последнее время стала очень важным показателем для Google. Ну а про второй способ мало кто знает, но он наиболее эффективен, поэтому в этой статье я расскажу как правильно подключить библиотеку шрифтов Font Awesome на сайт локально.

Подключение Font Awesome на сайт в 3 шага

1. Заходим на официальный веб-сайт Font Awesome и регистрируемся — нажимаем «Start for Free»:

font-awesome

Мы получаем бесплатную лицензию на минимальный набор иконок, которые нам нужно будет скачать. Для тех, кому этого недостаточно могут купить лицензию PRO — откроются дополнительные коллекции с разными стилями, но для меня этого вполне достаточно.

2. Переходим на страницу Hosting Font Awesome Yourself  — появится техническое описание с инструкциями. Нажимаем кнопку «Download Font Awesome Free for the Web» и скачиваем архив с Awesome шрифтами на компьютер:

how-download-fontawesome

3. По FTP протоколу или SSH закачиваем архив в корневую (или любую другую) директорию вашего сайта. Распакуйте архив. Когда папка fontawesome появится на вашем сервере, переходим в редактирование шаблона сайта и в коде перед тегом </header> добавляем строчку:

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

Готово. Теперь библиотека Font Awesome будет подгружаться на сайт локально через указанный файл стилей.

Как использовать Font Awesome?

Переходим в галерею Font Awesome:

icons-fontawesome-gallery

Вбиваем в поиске ключевое слово, например «eye» и выбираем нужную бесплатную иконку,  которые входят в скачанный нами пакет (платные иконки будут скрыты серым цветом — они недоступны):

how-add-fontawesome-icons

Далее вы попадете на страницу выбранной иконки с ее указанными размерами и параметрами, нажимаем «Start Using This Icon»:

icon-fontawesome

Осталось просто скопировать в буфер обмена код иконки:

fontawesome-how-add

Открываем шаблон своего сайта и вставляем скопированный код в том месте, где должна отображаться иконка, пример:

add-fontawesome-on-website

Сохраняемся. Перезагружаем страницу без кэша (CTRL+F5) и проверяем. Если все сделали правильно — иконка должна появиться:

fontawesome-how-add-eyeicon

Пример: как вместо текста «Главная» в меню показывать иконку?

Текст пункта меню «Главная» иногда лишний и раздражает, многие вебмастера используют хук с иконками. Именно FontAwesome иконками, а не изображениями, которые увеличивают время загрузки веб-страницы.

Итак, для сначала нужно избавиться от текста «Главная» (или любого другого). Скрыть его можно конечно же с помощью CSS — идентификатора или класса (например, li class=»item1″), или если у вас CMS Joomla/WordPress — зайти в меню и, в зависимости от версий CMS: а) отключить вывод текста в опциях меню; б) просто вручную удалить текст пункта меню, а вместо него вставить код пробела — &#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, что дает возможность менять их цвет и размеры без изменения качества;
  • Легкость — не нагружает сайт, не замедляет загрузку веб-страниц (если использовать локально);
  • Простота — подключаются в 3 шага. Все стили уже заданы в CSS-файле, которые можно изменить под свои требования. Пользователю нужно лишь скачать и загрузить архив на сайт, указать путь к css-стилям в хедере и вставить готовую строчку кода в исходном коде страницы;
  • Иконки кроссплатформенные — их поддерживают все браузеры мира, они всегда корректно отображаются;
  • Иконки можно использовать на любых CMS, фреймворках, веб-страницах;
  • Иконки распространяются по бесплатной лицензии.
Оценка:
( 1 оценка, среднее 5 из 5 )
Подписка на KRASHENININ.TECH

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


Виталий Крашенинин/ автор статьи
Основатель блога, публицист, обзорщик веб-технологий, IT-специалист. Исследователь цифрового мира. Сфокусирован на кибербезопасности, системном администрировании, веб-разработке и SEO.
Не забудьте поделиться материалом в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Есть мысли? Прокомментируй!x
()
x
Читайте ранее:
Кеширование Memcache
Что такое Memcache и как его установить?

Memcache - это расширение PHP,  которое c помощью программного обеспечения Memcached реализует кэширование данных в оперативной памяти на основе хэш-таблицы....

Закрыть