JSFiddle - React, Tailwind, and code Playground

HTML

<a class="facebook" href="#"><span>facebook</span></a>

<a class="facebook2" href="#"><img src= 
"http://icons.iconarchive.com/icons/papirus-team/papirus-apps/256/facebook-icon.png" 
         alt="facebook"></a>
         
         
<a class="facebook3" href="#"><i class="fab fa-facebook-square"></i></a>
<script src="https://use.fontawesome.com/2025cb7376.js"></script>

CSS

.facebook span{
  display: none;
}
.facebook::after{
  display: block;
  content:"";
  background: url("http://icons.iconarchive.com/icons/papirus-team/papirus-apps/256/facebook-icon.png");
  background-size: cover;
  width: 32px;
  height: 32px;
  
}

.facebook2 img{
  display: block;
  width: 32px;
  height: 32px;
}

.facebook3{
   font-family: "fontawesome";
   font-size:32px;
   font-style: normal;
   color: #406192;
}
.facebook3 i{
   font-style: normal;  
}