<div>
  <a href="#"><i class="fab fa-facebook"></i></a>
  <a href="#"><i class="fab fa-twitter"></i></a>
  <a href="#"><i class="fab fa-instagram"></i></a>
  <a href="#"><i class="fab fa-pinterest"></i></a>
</div>


@import url('https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css');
a {
  background:blue;
  color:#fff;
  text-align:center;
  border-radius:50%;
  font-size:2rem;
  height:60px;
  width:60px;
  /* trick */
  line-height:62px;
}
a:hover {
  background:firebrick;
}

div {
  padding:20px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.