Font Awesome — это онлайн-сервис, созданный веб-разработчиком Дэйвом Ганди. Позволяет каждому вебмастеру использовать на своем сайте открытые Awesome шрифты. Поставляется в виде коллекции иконок в формате svg. Существует два способа подключить их к сайту: удаленно — указав путь к css файлу (расположенному на сервере Font Awesome) в хедере вашего сайта или локально — скачать бесплатно библиотеку, загрузить в директорию сайта и использовать в коде. Первый вариант мне не подошел, так как подключение лишних стилей в шапке и так сильно тормозит загрузку веб-страниц, которая в последнее время стала очень важным показателем для Google. Ну а про второй способ мало кто знает, но он наиболее эффективен, поэтому в этой статье я расскажу как правильно подключить библиотеку шрифтов Font Awesome на сайт локально.
Подключение Font Awesome на сайт в 3 шага
1. Заходим на официальный веб-сайт Font Awesome и регистрируемся — нажимаем «Start for Free»:
Мы получаем бесплатную лицензию на минимальный набор иконок, которые нам нужно будет скачать. Для тех, кому этого недостаточно могут купить лицензию PRO — откроются дополнительные коллекции с разными стилями, но для меня этого вполне достаточно.
2. Переходим на страницу Hosting Font Awesome Yourself — появится техническое описание с инструкциями. Нажимаем кнопку «Download Font Awesome Free for the Web» и скачиваем архив с Awesome шрифтами на компьютер:
3. По FTP протоколу или SSH закачиваем архив в корневую (или любую другую) директорию вашего сайта. Распакуйте архив. Когда папка fontawesome появится на вашем сервере, переходим в редактирование шаблона сайта и в коде перед тегом </header> добавляем строчку:
<link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">
Готово. Теперь библиотека Font Awesome будет подгружаться на сайт локально через указанный файл стилей.
Как использовать Font Awesome?
Переходим в галерею Font Awesome:
Вбиваем в поиске ключевое слово, например «eye» и выбираем нужную бесплатную иконку, которые входят в скачанный нами пакет (платные иконки будут скрыты серым цветом — они недоступны):
Далее вы попадете на страницу выбранной иконки с ее указанными размерами и параметрами, нажимаем «Start Using This Icon»:
Осталось просто скопировать в буфер обмена код иконки:
Открываем шаблон своего сайта и вставляем скопированный код в том месте, где должна отображаться иконка, пример:
Сохраняемся. Перезагружаем страницу без кэша (CTRL+F5) и проверяем. Если все сделали правильно — иконка должна появиться:
Пример: как вместо текста «Главная» в меню показывать иконку?
Текст пункта меню «Главная» иногда лишний и раздражает, многие вебмастера используют хук с иконками. Именно FontAwesome иконками, а не изображениями, которые увеличивают время загрузки веб-страницы.
Итак, для сначала нужно избавиться от текста «Главная» (или любого другого). Скрыть его можно конечно же с помощью CSS — идентификатора или класса (например, li class=»item1″), или если у вас CMS Joomla/WordPress — зайти в меню и, в зависимости от версий CMS: а) отключить вывод текста в опциях меню; б) просто вручную удалить текст пункта меню, а вместо него вставить код пробела —  .
Теперь используем 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, фреймворках, веб-страницах;
- Иконки распространяются по бесплатной лицензии.
