АКТУАЛЬНО:

Как использовать 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  – появится техническое описание с инструкциями:

how-download-fontawesome

Нажимаем кнопку “Download Font Awesome Free for the Web” и скачиваем архив с иконками на компьютер.

3. Теперь с помощью FTP (или SSH) закачиваем этот архив в корневую (или любую другую) директорию вашего сайта. Разархивируйте его.

4. Когда папка fontawesome появится на вашем сервере, переходим в редактирование шаблона сайта и в коде перед </header> добавляем строку:

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

Готово. Таким образом библиотека иконок 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-специалист. Предоставляю услуги по администрированию, техническому обслуживанию и поисковому продвижению веб-сайтов.
Не забудьте поделиться материалом в соцсетях:
KRASHENININ.TECH - блог о веб-технологиях, и не только
Подписаться
Уведомление о
guest
0 Комментарий
Встроенные отзывы
Просмотреть все комментарии
0
Буду рад вашим мыслям!x
()
x
Читайте ранее:
Что такое memcache и как его установить?

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

Закрыть