W3.CSS Іконки
Бібліотеки іконок
За допомогою W3.CSS ви можете використовувати будь-яку бібліотеку іконок, як-от:
- Іконки Font Awesome
- Іконки Google Material Design
- Іконки Bootstrap
Використання бібліотеки іконок
Щоб вставити іконку:
- Включіть бібліотеку іконок із CDN (Content Delivery Network / Мережа доставки вмісту) у розділ <head> веб-сторінки.
- Додайте назву класу іконок до будь-якого вбудованого елемента HTML.
Порада: Елементи <i> та <span> широко використовуються для додавання іконок.
Щоб керувати розміром іконок, змініть властивість font-size іконок або скористайтеся одним із класів w3-size:
- w3-tiny
- w3-small
- w3-large
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
Деякі іконки Font Awesome
fa fa-home
fa fa-bars
fa fa-arrow-left
fa fa-arrow-right
fa fa-search
fa fa-close
fa fa-refresh
fa fa-trash
fa fa-male
fa fa-car
fa fa-truck
fa fa-plane
Приклад
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
Спробуйте самі »
Повний список іконок за посиланням: Довідник іконок
Деякі іконки Google Material Design
home
home
home
menu
menu
menu
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
search
search
search
close
close
close
refresh
refresh
refresh
delete
delete
delete
person
person
person
directions_car
directions_car
directions_car
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
Приклад
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://w3schoolsua.github.io/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
Спробуйте самі »
Деякі іконки Bootstrap
home
menu-hamburger
arrow_back
arrow_forward
search
remove
refresh
trash
user
file
plane
Приклад
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>
Спробуйте самі »
