Іконки Підручник
Як додати іконки на вебсторінку?
Щоб вставити іконку (піктограму), додайте назву класу іконки до будь-якого вбудованого елемента HTML.
Елементи <i> та <span> широко використовуються для додавання іконок.
Усі іконки в наведених нижче бібліотеках іконок є масштабованими векторними іконками, які можна налаштувати за допомогою CSS (розмір, колір, тінь тощо).
Іконки Font Awesome 5
Щоб скористатися безкоштовними іконками Font Awesome 5, перейдіть на fontawesome.com та увійдіть на сайт (або зареєструйтесь на сайті), щоб отримати код для використання іконок на ваших вебсторінках.
Дізнайтеся більше про те, як розпочати роботу з Font Awesome у розділі Font Awesome 5 на нашому сайті W3Schools українською.
Примітка: завантаження чи встановлення іконок на сам сайт не потрібні!
Приклад
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<!--Отримайте код на fontawesome.com-->
</head>
<body>
<i class="fas fa-band-aid"></i>
<i class="fas fa-cat"></i>
<i class="fas fa-dragon"></i>
<i class="far fa-clock"></i>
<i class="fas fa-clock"></i>
</body>
</html>
Спробуйте самі »
Іконки Font Awesome 4
Щоб використовувати іконки Font Awesome 4, додайте такий рядок у розділ <head> вашої сторінки HTML:
Примітка: завантаження чи встановлення іконок на сам сайт не потрібні!
Приклад
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
</body>
</html>
Спробуйте самі »
Іконки Bootstrap 3
Щоб використовувати гліфіконки Bootstrap 3, додайте такий рядок у розділ <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>
Спробуйте самі »Примітка. Гліфікони не підтримуються в Bootstrap 4.
Щоб дізнатися більше про Bootstrap 3 та гліфікони, відвідайте Bootstrap 3 Підручник на нашому сайті W3Schools українською.
Іконки 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>
Спробуйте самі »
Щоб отримати повний список УСІХ іконок (Font Awesome, Bootstrap та Google), відвідайте Довідник іконок на нашому сайті W3Schools українською.
