Font awesome: полезные приемы

обзор и полезные приемы, о которых Вы могли не знать

2019-12-22 dr.Brain

время чтения 5 мин.

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

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

Иконки созданы в SVG, но нет причины беспокоиться, в данном случае Вам не нужны какие-либо знания о работе с SVG.

Содержание

Начало

Для размещения иконок Font Awesome использует следующий код:

<i class="fas fa-star"></i>

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

Стили

Для иконок Font Awesome существует четыре стиля:

Solid
Regular
Light
Duotone

При этом иконки solid практически все бесплатные. Остальные - доступны только в pro-версии.

Как это работает?

Объявление CSS-классов для тега i происходит следующим образом:

Сначала идет класс, определяющий выбранный стиль:

fas для solid,
far для regular,
fal для light,
fad для duotone.

Затем следует класс самой иконки:

который всегда начинается с префикса fa-
и заканчивается именем иконки.

Итак, основы использования Font Awesome оказались достаточно просты. Переходим к некоторым полезным приемам.

Приемы

Как изменить размер иконки?

Именно так, Font Awesome позволяет нам изменять размер иконки, не вмешиваясь в CSS-код, достаточно выбрать соответствующий класс для элемента:

<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera fa-lg"></i>
<i class="fas fa-camera fa-2x"></i>
<i class="fas fa-camera fa-3x"></i>
<i class="fas fa-camera fa-5x"></i>
<i class="fas fa-camera fa-7x"></i>
<i class="fas fa-camera fa-10x"></i>

Так будет выглядеть иконка в размере xs:

так - в размере 5x:

а так - в размере 10x:

Это просто, не правда ли?

Как сделать иконку маркером списка?

Для этого нужно:

Добавить класс fa-ul для тега списка ul,

Обернуть код выбранной иконки в тег span с классом fa-li и поместить в начале каждого элемента списка li.

<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Иконки Font Awesome</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>могут</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>заменить маркеры HTML-списка</li>
<li><span class="fa-li"><i class="far fa-square"></i></span>не меняя CSS</li>
</ul>

А вот и результат:

Иконки Font Awesome
могут
заменить маркеры HTML-списка
не меняя CSS

Вращение иконки

Иконку можно поворачивать вокруг собственной оси, и для этого не нужно CSS-свойство transform. Достаточно добавить соответствующий класс:

<div class="fa-4x">
  <i class="fas fa-snowboarding"></i>
  <i class="fas fa-snowboarding fa-rotate-90"></i>
  <i class="fas fa-snowboarding fa-rotate-180"></i>
  <i class="fas fa-snowboarding fa-rotate-270"></i>
  <i class="fas fa-snowboarding fa-flip-horizontal"></i>
  <i class="fas fa-snowboarding fa-flip-vertical"></i>
  <i class="fas fa-snowboarding fa-flip-both"></i>
</div>

Вот что означают эти классы:

fa-rotate-90 поворот на 90^o по часовой стрелке,
fa-rotate-180 поворот на 180^o по часовой стрелке,
fa-rotate-270 поворот на 270^o по часовой стрелке,
fa-flip-horizontal отражение по горизонтали,
fa-flip-vertical отражение по вертикали,
fa-flip-both отражение по горизонтали и вертикали (только для версий 5.7.0 и выше).

Так выглядит иконка в стандартном положении:

так при повороте на 180^o:

а так отраженная по вертикали:

Как анимировать иконки?

Классы fa-spin и fa-pulse добавят немного динамики выбранным иконкам:

<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-spinner fa-pulse"></i>

Вот пример с классом fa-spin:

а это вариант с fa-pulse:

Как объединить иконки?

Для этого нужно обернуть объединяемые иконки в родительский элемент с классом fa-stack:

<span class="fa-stack fa-2x">
  <i class="fas fa-square fa-stack-2x"></i>
  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>

Результат:

Внимание! Для всех приведенных ниже приемов нужна SVG версия Font Awesome

Как масштабировать иконку относительно контейнера (power transforming)?

Масштабировать иконку не изменяя контейнер можно с помощью атрибута data-fa-transform:

grow-# для увеличения (# - целое число),

shrink-# для уменьшения (# - целое число).

<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
<i class="fas fa-seedling" style="background:MistyRose"></i>
<i class="fas fa-seedling" data-fa-transform="grow-6" style="background:MistyRose"></i>
</div>

Вот что получится при уменьшении shrink-8:

Без изменений:

Вот что получится при увеличении grow-6:

Как позиционировать иконку?

Для позиционирования иконки без модификации контейнера с помощью атрибута data-fa-transform используйте свойства:

up-# для смещения вверх,
down-# для смещения вниз,
left-# для смещения влево,
right-# для смещения вправо.

где # - число, которое может содержать десятичные значения.

<div class="fa-4x">
  <i class="fas fa-seedling" data-fa-transform="shrink-8" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
  <i class="fas fa-seedling" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
</div>

Результат подобен абсолютному позиционированию в CSS.

Так будет выглядеть смещение иконки вверх относительно контейнера:

а так - смещение влево:

Как создать маску для иконки?

Это еще одна функция, позволяющая объединять две иконки в одну, но теперь с помощью атрибута data-fa-mask, в который мы помещаем классы фоновой иконки:

<div class="fa-4x">
  <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
</div>

Результат:

Таким образом, мы объединили

<i class="fas fa-comment"></i>

<i class="fas fa-pencil-alt"></i>

Как добавить текст к иконке?

Да, поверх иконки можно что-то написать.

<span class="fa-layers fa-fw" style="background:MistyRose">
  <i class="fas fa-calendar"></i>
  <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span>
</span>

<span class="fa-layers fa-fw" style="background:MistyRose">
  <i class="fas fa-certificate"></i>
  <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span>
</span>

Для этого нужно:

создать обертку span с классом fa-layers,
внутри обертки добавить иконку i,
после которой должен следовать элемент span с классом fa-layers-text, содержащий текст.

А вот и результат:

и еще:

NEW

Как к иконке добавить счетчик?

Для того чтобы добавить счетчик, последовательность действий почти такая же, как и при добавлении текста поверх иконки.

<span class="fa-layers fa-fw" style="background:MistyRose">
  <i class="fas fa-envelope"></i>
  <span class="fa-layers-counter" style="background:Tomato">1,419</span>
</span>

Нужно:

создать обертку span с классом fa-layers,
внутри обертки добавить иконку i,
после которой должен следовать элемент span с классом fa-layers-counter.

По умолчанию счетчик находится в правом верхнем углу, но его положение можно изменить с помощью соответствующих классов:

fa-layers-bottom-left внизу слева,
fa-layers-bottom-right внизу справа,
fa-layers-top-left вверху слева,
fa-layers-top-right вверху справа (значение по умолчанию).

Результат:

1,419

Спасибо за внимание.

Перевод статьи Kiss Patrik “Font Awesome guide and useful tricks you might not know about”.

doctor Brain