Подключения Font Awesome к сайту - выбор лучшего варианта

Как и было обещано в статье про адаптивное бургер меню сейчас мы будем последовательно разбирать и анализировать, какие бывают способы подключения Font Awesome к веб-ресурсу и какой из них лучший. А также рассмотрим, наиболее характерные принципы использования.

В сущности Font Awesome это библиотека (хранилище) обыкновенного шрифта в векторном формате, где вместо традиционных букв и цифр используются значки (иконки), символизирующие различные предметы, события, действия и т.д. Ими легко пользоваться. Они встраиваются в документы html, адаптируются с помощью языка css, масштабируются в зависимости от изменения размера экрана, признаются всеми браузерами и регулярно обновляются.

Изначально они были созданы для известного фреймворка Bootstrap, но стали так популярны, что теперь применяются практически везде. Редкий веб-ресурс обходится без них.

Практика подключения Font Awesome

Она может быть реализована благодаря:

внешнему подключению к самому хранилищу;
скачиванию стандартной сборки;
скачиванию индивидуальной сборки.

Первый способ

Он же самый простой, ничего не нужно скачивать, а подключение осуществляется непосредственно к одному из внешних источников с помощью внешней ссылки. Имеется недостаток - неудобно использовать в локальном хостинге.

Сама процедура подключения - необходимо посетить официальный сайт Font Awesome, если это англоязычная страница кликнуть на кнопку «Start for Free» в центре или на «Start» в верхнем меню, а если русскоязычная то на «Начало работы» в аналогичном меню. Далее в предлагаемую форму ввести свой электронный адрес для получения индивидуальной ссылки. В ответ придет письмо с ожидаемой ссылкой

 <script src="https://use.fontawesome.com/индивидуальный номер .js"></script>

Можно сразу ею воспользоваться, вставив в блок <head> или <footer> своего ресурса. А можно еще и зарегистрироваться, как будет предложено в письме, чтобы получить доступ к своему аккаунту с целью приобретения дополнительных возможностей.

Существует более простой путь, если использовать одну из старых, но рабочих ссылок

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

или

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Второй способ

Он предназначен для тех, кто стремится к большей независимости. В этом случае практикуется скачивание и включение в свой веб-проект стандартных сборок иконок (более 600 шт. каждая).

Самый простой путь - скачать версию 4.7.0. Для этого необходимо опять войти на тот же официальный сайт. Если это русскоязычная страница, то в центре кликуть на кнопку «Скачать». Появится окно с сообщением о доступности 5-й версии и предложением ею воспользоваться, но мы находим в нижней части окна кнопку, где можно получить Font Awesome 4, которую и нажимаем. В результате получаем архив, распаковываем его в нужное место и прописываем строку в блок <head>

 <link rel="stylesheet" href="/ ... /css/font-awesome.min.css">

А если любопытствующие нажмут кнопку - «Font Awesome 5», то попадут на англоязычную страницу, где появится возможность воспользоваться различными платными и бесплатными вариантами. Например, можно скачать 5-ю версию с созданием аккаунта для получения доступа к инструментарию и много чего еще, а можно даже попробовать 6-ю.

Решив немного познакомиться с этими последними редакциями, я узнал, что в большинстве таких случаев для подключения Font Awesome лучше воспользоваться файлом стилей css/all.css

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

Другие файлы стилей предназначены для исключительных ситуаций.

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

Третий способ - индивидуальная сборка

Не могу представить, когда и кому на одном веб-ресурсе может потребоваться сразу такое огромное количество разнообразных значков. Ведь гораздо разумнее держать на своем ресурсе лишь действительно необходимое. Поэтому будем скачивать лишь нужную символику, например с помощью сервиса Fontello.

Для этого, заходим на официальный сайт Fontello, откроется несколько видов шрифтов. Я всегда выбираю Font Awesom. Нажимаем на нужные символы, при этом, они помечаются красными кругами (для отмены - нажать еще раз) и кликаем на клавишу «Download webfont». При желании, предварительно нажимая кнопки слева, можно посмотреть на выбранные символы в сгруппированном виде и поварьировать их настройками.

На этом все, упакованный архив по аналогии скачивается и распаковывается в нужное место. У меня, в распакованном виде он занимает 55КБ. Правда, это объем занимают лишь 4 мной выбранных символа, но если туда добавить еще некоторое количество, то объем станет немногим больше.

В порядке информации и для сравнения - полные сборки версий Font Awesom составляют: 4-я - 1.26МБ, 5-я - 14.8МБ, 6-я - 11МБ.

Скаченный архив Fontello выглядит следующим образом

Запустив файл demo.html можно увидеть все скаченные значки из полученного архива, в данном случае 4 шт.

Стили подключаются по аналогии со вторым способом, только файл стилей другой

 <link rel="stylesheet" href="/путь до шрифта/css/fontello.css">

Использование символов Font Awesom

Разные файлы стилей версий шрифтов предназначены для применения в различных ситуациях. Например, как это представлено на скринште ниже

Их назначение:

1 - основное;
2 - для IE;
3 - для анимации;
...

Принцип применения иконок Font Awesome един, но имена классов у них могут быть другие. К примеру, отображение иконки «бургер меню», как правило, осуществляется с помощью кода - , а у полученной благодаря сервису Fontello код другой - . Ниже показано еще три примера использования выбранных и скаченных иконок, которые упоминались выше

 <span class="icon-phone"></span>
 <span class="icon-quote-left"></span>
 <span class="icon-paper-plane"></span>

Как результат - демонстрация четырех вышеобозначенных иконок:

Один нюанс - часто при отображения символов применяется тег , а иногда тег , но имеется мнение, что предпочтительнее.

Заключение

Таким образом мы рассмотрели три способа подключения Font Awesome. Полагаю, что последний с индивидуальной сборкой самый оптимальный. Также были рассмотрены основные принципы использования символов этого шрифта.