Social Icons

 

Social Icons

HTML

<div class="container">

<i id="icon1" class="fa fa-facebook"></i>

<i id="icon2" class="fa fa-instagram"></i>

<i id="icon3" class="fa fa-youtube"></i>

<i id="icon4" class="fa fa-twitter"></i>

</div>

CSS

<style>

*{

box-sizing: border-box;

}

body{

margin: 0;

padding: 0;

background-image: url(https://visme.co/blog/wp-content/uploads/2017/07/50-Beautiful-and-Minimalist-Presentation-Backgrounds-03.jpg);

background-repeat: no-repeat;

background-size: 100%;

}

.container{

text-align: center;

letter-spacing: 50px;

font-size: 50px;

margin-top: 300px;

margin-left: 100px;

color: rgba(0, 0, 0, 0.5)

}

#icon1,#icon2,#icon3,#icon4{

width: 60px;

height: 60px;

position: relative;

padding: 18px;

border-radius: 100%;

cursor: pointer;

margin-right: 100px;

transform: 0.4s;

}

#icon1:hover{

color: #4267B2;

text-shadow: 0 0 10px #4267B2,0 0 20px #4267B2,0 0 30px #4267B2;

}

#icon2:hover{

color: #8a3ab9;

text-shadow: 0 0 10px #8a3ab9,0 0 20px #8a3ab9,0 0 30px #8a3ab9;

}

#icon3:hover{

color: #FF0000;

text-shadow: 0 0 10px #FF0000;

}

#icon4:hover{

color: #1DA1F2;

text-shadow: 0 0 10px #1DA1F2,0 0 20px #1DA1F2;

}

</style>    

Font Awesome

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/

font-awesome/4.7.0/css/font-awesome.min.css">