Icon hover. Turn icon at angle.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<style type="text/css">
*{
margin: 0;
padding: 0;
text-decoration: none;
}
body{
background: #f1f1f1;
}
.s-m{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.s-m a{
display: inline-flex;
width: 40px;
height: 40px;
background: #2c3e50;
color: white;
margin: 0 6px;
border-radius: 50%;
justify-content: center;
align-items: center;
transition: 0.4s;
font-size: 22px;
}
.s-m a:hover{
background: #e67e22;
}
.s-m a i{
transition: 0.4s all;
}
.s-m a:hover > i{
transform: scale(1.6) rotate(25deg);
}
</style>
</head>
<body>
<div class="s-m">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-google-plus-g"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</body>
</html>