I Shar

I Shar

мир глазами веб-разработчика

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

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

I Shar

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

Photo by Balázs Kétyi on Unsplash

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

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

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


Содержание


Начало

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



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

Стили

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

  1. Solid
  2. Regular
  3. Light
  4. Duotone

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

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

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

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

  1. fas для solid,
  2. far для regular,
  3. fal для light,
  4. fad для duotone.

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

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

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


Приемы

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

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










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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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




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

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

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

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


  
  


Результат:


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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат:

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



с



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

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


  
  27


  
  NEW


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

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

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

27

и еще:

NEW

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

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


  
  1,419


Нужно:

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

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

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

Результат:

1,419


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


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

    • frontend
    • html
    • css

Новые публикации

Далее

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.