CSS | Иконки
Опубликовано: 1 Марта, 2022
Иконки могут быть добавлены на нашу HTML-страницу с помощью библиотеки иконок. Все значки в библиотеке можно отформатировать с помощью CSS. Их можно настроить по размеру, цвету, тени и т. Д.
Типы библиотеки иконок:
- Font Awesome Иконки
- Иконки Google
- Иконки Bootstrap
Примечание: вся вышеупомянутая библиотека не требует загрузки или установки.
Font Awesome Icons: To use Font Awesome Icons add the following link inside <head> section.
<link rel="stylesheet" |
Example 1:
<!DOCTYPE><html> <head> <link rel="stylesheet" </head> <body> <h1> GEEKSFORGEEKS </h1> <i class="fa fa-cloud" style="font-size:32px;"></i> <i class="fa fa-heart" style="font-size:32px;"></i> <i class="fa fa-file" style="font-size:32px;"></i> <i class="fa fa-car" style="font-size:32px;"></i> <i class="fa fa-bars" style="font-size:32px;"></i> </body></html> |
Выход:
Example 2:
<!DOCTYPE><html> <head> <link rel="stylesheet" </head> <body> <h1> GEEKSFORGEEKS </h1> <i class="fa fa-heart" style="font-size:28px;color:red;"></i> <i class="fa fa-heart" style="font-size:30px;color:blue;"></i> <i class="fa fa-heart" style="font-size:32px;color:red;"></i> <i class="fa fa-heart" style="font-size:34px;color:blue;"></i> <i class="fa fa-heart" style="font-size:36px;color:red;"></i> </body></html> |
Выход:
Google Icons: To use Google Icons add the following link inside <head> section.
Example 1:
<!DOCTYPE><html> <head> </head> <body> <h1> GEEKSFORGEEKS </h1> <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> |
Выход:
Example 2:
<!DOCTYPE><html> <head> </head> <body> <h1> GEEKSFORGEEKS </h1> <i class="material-icons"style="font-size:30px;">cloud</i> <i class="material-icons"style="font-size:40px;">cloud</i> <i class="material-icons"style="font-size:50px;">cloud</i> <i class="material-icons"style="font-size:60px;">cloud</i> <i class="material-icons"style="font-size:70px;">cloud</i> </body></html> |
Выход:
Bootstrap Icons: To use Bootstrap Icons add the following link inside <head> section.
<link rel="stylesheet" |
Example 1:
<!DOCTYPE><html> <link rel="stylesheet" </head> <body> <h1> GEEKSFORGEEKS </h1> <i class="glyphicon glyphicon-cloud"style="font-size:28px;"></i> <i class="glyphicon glyphicon-user"style="font-size:30px;"></i> <i class="glyphicon glyphicon-thumbs-up"style="font-size:32px;"></i> <i class="glyphicon glyphicon-remove"style="font-size:34px;"></i> <i class="glyphicon glyphicon-envelope"style="font-size:36px;"></i> </body></html> |
Выход:
Example 2:
<!DOCTYPE><html> <link rel="stylesheet" </head> <body> <h1> GEEKSFORGEEKS </h1> <i class="glyphicon glyphicon-thumbs-up"style="font-size:20px;"></i> <i class="glyphicon glyphicon-thumbs-up"style="font-size:30px;"></i> <i class="glyphicon glyphicon-thumbs-up"style="font-size:40px;"></i> <i class="glyphicon glyphicon-thumbs-up"style="font-size:50px;"></i> <i class="glyphicon glyphicon-thumbs-up"style="font-size:60px;"></i> </body></html> |
Выход:
