Social media icons using html and css

Redxcyber
1 minute read

 

Create social media icons using html and css 


Code 👇🏻

<!doctype html>
<html>
<head>
  <script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"> </script>
  <style>
    body {
  text-align: center;
  margin: 20%;
}
h1 {
  color: red;
  margin-top: 110%;
  font-family: monospace;
  border-radius: 20%;
  text-shadow: 2px 2px 5px #979595;
}
div i {
  text-align: center;
  padding: 24px;
  display: flex;
  box-shadow: 4px 4px 6px #969696;
  border-radius: 50%;
  color: #444;
  background: transparent;
  border-spacing: 20px;
  font-size: 35px;
  margin-top: 90%;
  margin-left: 10px;
   }
div i:hover {
  color: #ff0000;
  background: black;
  padding: 27px;
  } 
  </style>
</head>
<body>
  <div class=" icons">
   <i class="fas fa-clock"></i>
   <i class="fa fa-twitter"></i>
   <i class="fa fa-instagram"></i>
   <i class="fa fa-telegram"></i>
   <i class="fa fa-whatsapp"></i>
   <i class="fa fa-github"></i>
   <h1>social media icons</h1>
   <h2> click on icons to see hover effect</h2>
  </div>
</body>
</html>