JSFiddle - React, Tailwind, and code Playground

HTML

<div class="alignright" id="facebook-round">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet" /><a class="facebook-round" style="color: rgba(44, 33, 33, 1);" href="https://www.facebook.com/pages/Mio-Natural/613852868659014">&nbsp;&nbsp;&nbsp;<i class="fa fa-facebook fa-3x"></i></a>
</div>

CSS

#facebook-round {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
background: #807D7D;
}

#facebook-round i{
margin-top: 0.22em;
margin-left: 0.12em;
color:rgba(44, 33, 33, 1);
}	

#facebook-round:hover {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
background: rgba(44, 33, 33, 1);
}	
.facebook-round {
  text-decoration:none;
}
#facebook-round:hover >i {
width: 3.8em;
height: 3.8em;
border-radius: 4em;
color: #807D7D;
}