Логотип блога MY

 ВЕБ-ТЕХНОЛОГИИ

 Домен itworldmy.ru - блог MY

начинающим

Подключения 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 выглядит следующим образом

Структура архива Fontello

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

Демо

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

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

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

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

Назначения файлов стилей

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

Принцип применения иконок Font Awesome един, но имена классов у них могут быть другие. К примеру, отображение иконки «бургер меню», как правило, осуществляется с помощью кода - <span class="fa fa-bars"></span>, а у полученной благодаря сервису Fontello код другой - <span class="icon-menu"></span>. Ниже показано еще три примера использования выбранных и скаченных иконок, которые упоминались выше

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

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

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

Заключение

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



Комментарии
Опубликовано: 0
Ждущих публикации: 0


Ваше имя:
(не более 20 символов)

Ваше сообщение:
(не более 1000 символов)



Новое в разделах

Новости ИТ

Делать сайт

Разное


Опрос 1

Какая у Вас система ?


   Linux - 5
   Windows - 9
   Обе - 2
   Android - 3
   iOS - 0
   Другие - 1

Всего: 20 чел.


Опрос 2

Какой формат док-ов пользуете?


   ODF - 4
   MS OOXML - 6
   Оба - 2
   Что это? - 3

Всего: 15 чел.


Данные

Время  - 16:17:44
Дата - 25.06.2022

Страница:
 - обновлена - 19.06.2022
 - посещений - 238

Сейчас:
 - на сайте - 1
 - переходов - 1

↑ ВВЕРХ