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, фреймворках, веб-страницах;
- Иконки распространяются по бесплатной лицензии.
