При помощи специальной библиотеки графических иконок можно легко добавлять CSS иконки на вашу HTML страницу.
Как добавить CSS иконки
Самый простой способ добавить иконки на сайт это воспользоваться какой-нибудь библиотекой иконок, например, Font Awesome, Bootrap или Google.
После этого к любому строчному элементу HTML (например, <i> или <span>) добавляется специальный класс иконки, который можно узнать на сайте библиотеки иконок.
Все иконки в описанных далее библиотеках иконок являются масштабируемыми векторными изображениями, которые можно настраивать при помощи CSS (изменять размер и цвет, добавлять тени и т.п.).
Иконки Font Awesome
Чтобы добавить иконки Font Awesome, перейдите на сайт fontawesome.com, зарегистрируйтесь и получите код, который затем нужно добавить в секцию <head> вашей HTML страницы:
При этом никакой загрузки или установки не требуется!
Пример:
<!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>
Результат:
Иконки Bootstrap
Чтобы использовать "глификонки" Bootstrap, добавьте следующий код в секцию <head> вашей HTML страницы:
При этом никакой загрузки или установки не требуется!
Пример:
<!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 страницы:
При этом никакой загрузки или установки не требуется!
Пример:
<!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>
Результат:
