CSS Іконки
Як додати іконки
Найбільш простий спосіб додати іконку на свою HTML-сторінку - використовувати бібліотеку іконок, наприклад, Font Awesome.
Додайте назву вказаного класу іконок в будь-який вбудований HTML-елемент (наприклад, <i> або <span>).
Всі іконки в бібліотеках іконок нижче представляють собою масштабовані вектори, які можна налаштувати за допомогою CSS (розмір, колір, тінь і т.д.)
Font Awesome Іконки
Щоб використовувати іконки Font Awesome, перейдіть на fontawesome.com, увійдіть в систему та отримайте код для додавання в розділ <head> вашої HTML-сторінки:
<script src="https://kit.fontawesome.com/ваш код.js"></script>
Дізнайтесь більше про те, як почати використовувати Font Awesome в підручнику Font Awesome 5 на нашому сайті W3Schools українською.
Примітка: Не потрібне завантаження чи встановлення!
Приклад
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/26e3ee569a.js"></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, відвідайте Довідник іконок на нашому сайті W3Schools українською.
Bootstrap іконки
Щоб використовувати гліфіконки 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>
Результат:
Для отримання повного списку всіх іконок, відвідайте Підручник іконок на нашому сайті W3Schools українською.
Примітка. Посилання на сайті іконок (Fontawesome, Bootstrap, Google-іконки) можуть змінюватись в залежності від виходу нової версії набору іконок. Тому для отримання найбільш нової версії набору іконок і посилання на них відвідайте офіційний сайт необхідного набору та скопіюйте потрібне посилання.
