Font Awesome: Библиотека Иконок для Веб-Приложений

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

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

Содержание

Содержание
Введение
Стили иконок
Основы использования
Полезные приемы
Изменение размера иконок
Иконки как маркеры списков
Вращение иконок
Анимация иконок
Объединение иконок
Масштабирование относительно контейнера
Позиционирование иконок
Создание масок для иконок
Добавление текста к иконкам
Добавление счетчиков к иконкам

Содержание

Введение
Стили иконок
Основы использования
Полезные приемы
- Изменение размера иконок
- Иконки как маркеры списков
- Вращение иконок
- Анимация иконок
- Объединение иконок
- Масштабирование относительно контейнера
- Позиционирование иконок
- Создание масок для иконок
- Добавление текста к
- Добавление счетчиков к иконкам

Введение

Чтобы использовать иконки Font Awesome, необходимо вставить следующий код в HTML:

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

Этот код отобразит небольшую звездочку в вашем проекте.

Стили иконок

Font Awesome предлагает четыре основных стиля иконок:

Solid
Обычные
Легкий
Двухтональный

Большинство иконок в стиле Solid доступны бесплатно, в то время как остальные стили требуют приобретения pro-версии.

Основы использования

Классы CSS для иконок Font Awesome объявляются следующим образом:

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

После стиля следует название иконки, например:

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

Полезные приемы

Изменение размера иконок

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

<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>

Иконки как маркеры списков

Чтобы использовать иконки в качестве маркеров списков, выполните следующие шаги:

Добавьте класс 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>

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

Иконки можно вращать с помощью дополнительных классов:

<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-spin и fa-pulse для анимации:

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

Объединение иконок

Для объединения иконок используйте класс 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>

Масштабирование относительно контейнера

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

<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>

Позиционирование иконок

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

<div class="fa-4x">
<i class="fas fa-seedling" data-fa-transform="shrink-8"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 up-6"></i>
<i class="fas fa-seedling" data-fa-transform="shrink-8 right-6"></i>
</div>

Создание масок для иконок

Объединение иконок с масками выполняется с помощью атрибута 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"></i>
</div>

Добавление текста к иконкам

Текст можно добавить поверх иконки с помощью fa-layers:

<span class="fa-layers fa-fw">
<i class="fas fa-calendar"></i>
<span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3">27</span>
</span>

Добавление счетчиков к иконкам

Для добавления счетчиков используйте fa-layers-counter:

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

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