Font Awesome 5 Інтро
Font Awesome 5
Font Awesome 5 має PRO версію з 7842 значками та БЕЗКОШТОВНУ версію з 1588 значками. У цьому посібнику буде зосереджено увагу на БЕЗКОШТОВНІЙ версії.
Щоб використовувати безкоштовні іконки Font Awesome 5, ви можете завантажити бібліотеку Font Awesome або зареєструвати обліковий запис на Font Awesome та отримати код (називається KIT CODE), який використовуватиметься під час додавання Font Awesome на вашу веб-сторінку.
Ми віддаємо перевагу підходу KIT CODE. Отримавши код, ви можете почати використовувати Font Awesome на своїх веб-сторінках, додавши лише один рядок HTML-коду:
<script src="https://kit.fontawesome.com/ваш_код.js" crossorigin="anonymous"></script>
Приклад
Ми отримали код a076d05399 і, вставивши тег <script> з кодом, ми можемо почати використовувати Font Awesome:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-clock"></i>
</body>
</html>
В результаті:
Примітка: Завантажувати чи інсталювати не потрібно!
Отримайте власний KIT CODE
Зареєструйтеся та безкоштовно отримайте власний код на сторінці:
fontawesome.comНове у Font Awesome 5
Новим у Font Awesome 5 є префікс fas, у Font Awesome 4 використовується fa.
Слова s у fas означає суцільний, а також деякі значки мають звичайний режим, визначений за допомогою префікса far:
Font Awesome призначений для використання з вбудованими елементами. Елементи <i> та <span> широко використовуються для іконок.
Також зауважте, що якщо ви змінюєте розмір шрифту або колір контейнера іконки, то іконка змінюється. Те ж саме стосується тіні та всього іншого, що успадковується за допомогою CSS.
Приклад
<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>
В результаті:
Розмір іконок
fa-xs,
fa-sm,
fa-lg,
fa-2x,
fa-3x,
fa-4x,
fa-5x,
fa-6x,
fa-7x,
fa-8x,
fa-9x,
або fa-10x класи використовуються для налаштування розмірів іконок відносно їх контейнера.
Приклад
Наступний код:
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>
В результаті:
Список іконок
Класи fa-ul та fa-li використовуються для заміни маркерів за замовчуванням у невпорядкованих списках.
Приклад
Наступний код:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul>
В результаті:
Анімовані іконки
Клас fa-spin отримує будь-які іконка для обертання, а клас fa-pulse отримує будь-яка іконка для обертання на 8 кроків.
Приклад
Наступний код:
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>
В результаті:
Примітка: IE8 та IE9 не підтримують анімацію CSS3.
Повернуті та перевернуті іконки
Класи fa-rotate-* та fa-flip-* використовуються для обертання та перевертання іконок.
Приклад
Наступний код:
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
В результаті:
Зібрання іконок
Щоб зібрати кілька іконок, використовуйте клас fa-stack у батьківському класі fa-stack-1x для іконки звичайного розміру та fa-stack-2x для більшої іконки.
Клас fa-inverse можна використовувати як альтернативний колір іконки. Ви також можете додати більші класи іконок до батьківського, щоб додатково контролювати розмір.
Приклад
Наступний код:
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span class="fa-stack fa-lg">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle (regular)<br>
<span class="fa-stack fa-lg">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera
В результаті:
Іконки фіксованої ширини
Як і літери та інші символи, іконки можуть мати різну ширину, і якщо вам потрібно вирівняти іконки по вертикалі, як у списку чи меню, це може стати проблемою.
Клас fa-fw використовується для встановлення іконок фіксованої ширини.
Приклад
<p>Фіксована ширина:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Іконка 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Іконка 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> Іконка 3</div>
<p>Без фіксованої ширини:</p>
<div><i class="fas fa-arrows-alt-v"></i> Іконка 1</div>
<div><i class="fas fa-band-aid"></i> Іконка 2</div>
<div><i class="fab fa-bluetooth-b"></i> Іконка 3</div>
В результаті:
Спробуйте самі »
Іконки з рамками та витягнуті
fa-border, fa-pull-right або fa-pull-left класи використовуються для витягування лапок або іконок статей.
Приклад
Наступний код:
<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
В результаті:
