Web Icons
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Web Icons</title>
<!-- Font awesome content deliver network (cdn) link to the stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<!-- Bootstrap content deliver network (cdn) link to the stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Google fonts external link to the stylesheet -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
#ltop {
background-color: indigo;
color: white;
font-size: 10em;
padding: 25px;
margin: 10px;
border: 4px dashed;
}
i {
padding: 10px;
}
</style>
</head>
<body>
<!--
Website Icon : is a picture or a symbol that you can put on your website.
It acts like a button or a link that you click on, or it can simply be decorative.
Icons can easily be added to your HTML page, by using an icon library.
- Font Awesome
- Google Material Icons
- Bootstrap Glyphicons
-->
<h1>Demo: Web Icons</h1>
<hr>
<h2>Demo Fontawesome Icons </h2>
<i class="fa fa-address-book"></i>
<i class="fa fa-binoculars"></i>
<i class="fa fa-cubes"></i>
<i class="fa fa-laptop"></i>
<i class="fa fa-copyright"></i>
<hr>
<h2>Demo Fontawesome - SocialMedia Icons </h2>
<i class="fab fa-twitter"></i>
<i class="fab fa-linkedin"></i>
<i class="fab fa-youtube"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-facebook-f"></i>
<hr>
<h2>Demo Fontawesome Icons Styling </h2>
<i id="ltop" class="fa fa-laptop"></i>
<hr>
<h2>Demo Google Material icons: </h2>
<i class="material-icons">home</i>
<i class="material-icons">favorite</i>
<i class="material-icons">grade</i>
<i class="material-icons">key</i>
<i class="material-icons">settings</i>
<hr>
<h2>Demo Bootstrap Glyphicons :</h2>
<i class="glyphicon glyphicon-eye-open"></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>