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

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

2022-12-22 I Shar

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

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

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

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

Содержание

Начало

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

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

Стили

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

Solid
Regular
Light
Duotone

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

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

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

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

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

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

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

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

Приемы

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

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

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

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

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

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

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

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

Добавить класс fa-ul для тега списка ul,
Обернуть код выбранной иконки в тег span с классом fa-li и поместить в начале каждого элемента списка li.
```
Иконки Font Awesome
могут
заменить маркеры HTML-списка
не меняя CSS
```

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

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

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

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

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

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 добавят немного динамики выбранным иконкам:

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

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

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

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

Результат:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат:

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

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

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

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

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

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

и еще:

NEW

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

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


  
  1,419

Нужно:

создать обертку 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”.

I Shar