4 способа подключения Font Awesome к сайту Выбор лучшего

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

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

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

Существует четыре способа использования данной коллекции: внешнее подключение на постоянной основе, скачивание стандартных и индивидуальных официальных сборок, а также неофициальных.

1 - внешний постоянный

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

Необходимо в блок <head> своего сайта вставить одну из следующих трех строк кода внешней связи:

Недостатки:

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

Официальный источник

Зайдя на домашнюю страницу Font Awesome по адресу – fontawesome.com можно пользоваться сервисами с регистрацией (1) платно (2) и бесплатно (3), а также без регистрации.

2 - с регистрацией

С учетом тарифного плана (4) допустимо использовать:

• индивидуальное подключение CDN;
• быстрые и постоянные обновления;
• загрузку собственных иконок;
• адаптацию стилей условных знаков с учетом особенностей собственного проекта;
• совместимость версий Font Awesome;
• скачивание компонентов Figma, иконочных шрифтов, SVG-файлов и размещение их на своем ресурсе.

Можно попробовать и бесплатно, но в этом случае предоставляемые возможности значительно урезаны.

3 - без регистрации стандартные

Допускает лишь скачивание бесплатных стандартных разных версий подборок иконок с претензией на универсальность, что занимает лишнее пространство внешней памяти: 4-я - ~1.26МБ, 5-я - ~14.8МБ, 6-я - ~11МБ.

Для их получения требуется перейти в «подвал» сайта, в разделе «Font Awesome» нажать на кнопку «All Versions», выбрать подходящую версию, нажав «Download». В данном случае v.6. Далее скачать архив (1) и распаковать в назначенную папку.

Подключение распакованного архива в блоке <head> кода HTML своего сайта осуществляется разместив строку:

Имеются особенности 4-й версии.

1. При появлении модального окна с предложением использовать v.5 необходимо избавиться от него и кликнуть на кнопку Download (1) или ссылку (2).

2. В данном случае CDN (3) не работает, если попытаться воспользоваться сервисом (4) последует переход на страницу с ошибкой 404.

3. С повторным появлением модального окна, но теперь уже дополнительно со ссылкой на архив 4-й (1), скачать его.

4. Важно! По адресу - fontawesome.com/v4/examples находятся полезные примеры адаптации условных знаков под особенности конкретных проектов.

В сети имеется также русскоязычный сайт с v.4 - fontawesome.ru , который в целом соответствует четырем предыдущим пунктам англоязычного, но с незначительными отличиями.

4 - индивидуальный сторонний бесплатный

Способ позволяет минимизировать используемое дисковое пространство веб-приложений и ускорить время реакции.

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

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

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

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

Запустив demo.html (2) можно увидеть все 4 полученных значка с их кодами.

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

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

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

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

Встраивание символов Font Awesome в HTML

Общий подход представления пиктограмм Font Awesome един, но коды разнятся.

В первом и третьем случаях

Второй случай здесь не рассматривается.

Отображение, к примеру, в v.4 пиктограммы «бургер меню» осуществляется с помощью следующего кода:

А все коды этой редакции находятся по адресу - fontawesome.com/v4/icons/ . Для просмотра других редакций цифра «4» заменяется на требуемую.

В четвертом случае

Пиктограммы полученные благодаря сервису Fontello имеют другой код, в частности известное уже «бургер меню»:

Ниже показано еще три примера использования выбранных и скаченных значков, которые упоминались выше:

В качестве результата демонстрируются четыре вышеупомянутых значка:              .

Один нюанс - часто при отображения пиктограмм применяется тег <i> или тег <span>, но бытует мнение что <span> предпочтительнее.

⚬ ⚬ ⚬

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