CSS -иконки
Значки можно легко добавить на HTML-страницу с помощью библиотеки значков.
Как добавить иконки
Самый простой способ добавить значок на HTML-страницу — использовать библиотеку значков, например Font Awesome.
Добавьте имя указанного класса значков в любой встроенный элемент HTML (например, <i>
или
<span>
).
Все значки в приведенных ниже библиотеках значков представляют собой масштабируемые векторы, которые можно настроить с помощью CSS (размер, цвет, тень и т. д.).
Иконки Font Awesome
Чтобы использовать значки Font Awesome, перейдите на
сайт fontawesome.com , войдите в систему и получите код для добавления в <head>
раздел вашей HTML-страницы:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Подробнее о том, как начать работу с Font Awesome, читайте в нашем руководстве по Font Awesome 5 .
Примечание: загрузка или установка не требуются!
Пример
<!DOCTYPE html>
<html>
<head>
<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>
Результат:
Чтобы получить полную информацию обо всех значках Font Awesome, посетите наш Справочник по значкам .
Иконки начальной загрузки
Чтобы использовать глификоны Bootstrap, добавьте следующую строку в <head>
раздел вашей HTML-страницы:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Примечание: загрузка или установка не требуются!
Пример
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
Результат:
Иконки Google
Чтобы использовать значки Google, добавьте следующую строку в <head>
раздел HTML-страницы:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Примечание: загрузка или установка не требуются!
Пример
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
Результат:
Чтобы просмотреть полный список всех значков, посетите наш учебник по значкам .