Иконки в CSS

Как добавить иконки

Библиотека иконок позволяет добавлять иконки на HTML-страницу.

Добавьте имя класса иконки любому встроенному элементу, например <i> или <span>, и иконка появится.

Поскольку эти иконки являются масштабируемыми векторами, их можно стилизовать с помощью CSS: размер, цвет, тень и так далее.

Иконки Font Awesome

Для иконок Font Awesome нужен код в <head> вашей страницы. Чтобы получить его, войдите в систему на fontawesome.com; вы получите небольшой скрипт-тег с kit.fontawesome.com.

Примечание: загружать или устанавливать ничего не нужно.

Пример

Когда скрипт Font Awesome находится в head, элементы <i> с классами Font Awesome отображают иконки.

HTML-страница, добавляющая иконки Font Awesome с помощью библиотеки иконок.

В `<head>` подключите скрипт-набор Font Awesome. В body добавьте несколько встроенных элементов `<i>` с классами Font Awesome (fas fa-cloud, fas fa-heart, fas fa-car, fas fa-file, fas fa-bars).

> Output: полная HTML-страница

Prompt

HTML-страница, добавляющая иконки Font Awesome с помощью библиотеки иконок. В <head> подключите скрипт-набор Font Awesome. В body добавьте несколько встроенных элементов <i> с классами Font Awesome (fas fa-cloud, fas fa-heart, fas fa-car, fas fa-file, fas fa-bars).

Output: полная HTML-страница

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>

<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>

</body>
</html>