Как подключить шрифт Awesome у себя на сайте

Опубликовано: 9 февраля 2019
Раздел(ы): HTML & CSS
Просмотры: 18472
Комментарии: 0

Awesome — это набор векторных иконок. А точнее шрифт состоящий не из букв и цифр, а из картинок. И эти изображения, так как они по сути являются шрифтом, можно оформлять (модифицировать) с помощью CSS стилей, устанавливать для них цвет, размер, тень и многое другое. Что согласитесь очень удобно.

В настоящий момент шрифт Awesome содержит более 1500 бесплатных иконок!

Как установить шрифт Awesome на сайт

Для того чтобы воспользоваться иконками шрифта Awesome нужно скачать набор шрифтов и стилей себе на сайт. Для этого переходим на официальный сайт — https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself и скачиваем архив, нажав на кнопку [Font Awesome Free for the Web].

Как подключить шрифт Awesome у себя на сайте

Далее вам необходимо распаковать архив и скопировать к себе на сайт содержимое папок /css и /webfonts, например в директорию /css/awesome.

Теперь подключите в секции <head> вашего сайта стили Awesome:

<link rel="stylesheet" href="/css/awesome/css/all.css" />

Альтернативный способ подключения шрифтов Awesome

Можно ничего не копировать к себе на сайт, а загружать все данные из CDN сети. Для этого нужно добавить следующий код в раздел <head>:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">

Плюсом такого решения будет более быстрая скорость работы сайта, так как данные будут параллельно грузиться с разных серверов (сайт — с вашего хостинга, а шрифты — из сети Awesome), кроме того шрифты уже могут быть закешированы браузером, если вы когда-то посещали сайты на которых они используются.

Минус — это невозможность использования на автономных сайтах (без доступа к интернету) и зависимость от CDN сети Awesome. Поэтому я, как правило, использую первый способ.

Как использовать шрифты awesome на сайте

После того как вы подключили шрифты у себя на сайте вы можете добавить иконки Awesome на веб-страницу двумя способами:

  1. задать соответствующие классы для элементов <i> и <span>;
  2. добавить к нужному элементу с помощью псевдоэлементов :before, :after и соответствующего значения свойства content.

Пример использования шрифтов Awesome

Для одного из сайтов я использовал следующий код (для элемента <i> использованы стили шрифта awesome версии 4.7.0):

<div class="uslugi">
    <div class="usluga"><i class="fa fa-laptop fa-5x"></i><br>Поставка вычислительной техники и ПО</div>
    <div class="usluga"><i class="fa fa-video-camera fa-5x"></i><br>Построение систем охранного телевидения и видеонаблюдения</div>
    <div class="usluga"><i class="fa fa-address-card-o  fa-5x"></i><br>Разработка систем контроля и управления доступом</div>
    <div class="usluga"><i class="fa fa-sitemap fa-5x"></i><br>Проектирование и монтаж ЛВС/СКС и телефонии</div>
</div>

В браузере результат выглядит так:

Как подключить шрифт Awesome у себя на сайте

Где посмотреть иконки Awesome для сайта

Если буквы и цифры у вас нанесены на клавиши клавиатуры и их использование не вызывает затруднений, то вот по шрифтам awesome есть вопрос: а как узнать соответствие кода иконки и его графического изображения. Например, какой использовать HTML код для отображения иконки Android?

Чтобы выяснить это посетите официальный сайт — https://fontawesome.com/icons?d=gallery&m=free

Как подключить шрифт Awesome у себя на сайте

Например, изображению Android соответствует следующий код:

<i class="fab fa-android"></i>

На экране он выглядит так:

Как подключить шрифт Awesome у себя на сайте

Какую версию шрифтов Awesome лучше использовать на сайте

Шрифт Awesome постоянно развивается, в него регулярно добавляются новые иконки и варианты их оформления. На момент написания статьи актуальна 5 версия шрифта. Но вы спокойно можете использовать у себя на сайте предыдущие редакции 4.7.0 или даже 3.2.1. Для этого посетите страницы https://fontawesome.com/v4.7.0/ и https://fontawesome.com/v3.2.1/ соответственно.

Как подключить шрифт Awesome у себя на сайте

Обратите внимание, что при скачивании предыдущей версии шрифта вас будут постоянно склонять к использованию новой версии 🙂

P.S.

На своих сайтах я обычно использую шрифт awesome версии 4.7.0. Причина в том, что он занимает меньше места. Правда в этой версии заметно скромнее набор иконок, в частности отсутствует упомянутая выше иконка Android, которая появилась лишь в версии 5.0.

Благодарности

При написании статьи были использованы следующие источники:

  1. https://html5book.ru/shrift-awesome/

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности сайта.
© Юрий Рассадников, 2011 - 2024
uptime узнать
Домен : reg.ru
Хостинг : adman.com
SQL - 6 | 0,195 сек. | 13.93 МБ