JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<ul class="list-inline">
    <li><a href="#"><i class="fa fa-2x fa-facebook-square"></i></a></li>
    <li><a href="#"><i class="fa fa-2x fa-twitter-square"></i></a></li>
    <li><a href="#"><i class="fa fa-2x fa-plus-square"></i></a></li>
</ul>    


<span class="fa-stack fa-lg icon-facebook">
    <i class="fa fa-square fa-stack-2x"></i>
    <i class="fa fa-facebook fa-stack-1x"></i>
</span>

<span class="fa-stack fa-lg icon-info">
    <i class="fa fa-circle-thin fa-stack-2x"></i>
    <i class="fa fa-info fa-stack-1x"></i>
</span>

CSS

.fa-stack-1x {
    color:black;
}
.icon-facebook {
  // color:white;  
   //border-color:black;
}