Cuadros Sociales con Font-Awesome

Resultado:
Descargar e incluir Font-Awesome dentro de la etiqueta head

<link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">

CSS:

.cuadros-sociales{}
.cuadros-sociales .item{
 text-align: center;
 display: inline-block;
 width: 67px;
 margin: 0;
 padding-top: 20px;
 padding-bottom: 20px;
}
.cuadros-sociales .item a{
 text-decoration: none;
 color: #fff;
}
.cuadros-sociales .facebook{
 background-color:#3b579d;
}
.cuadros-sociales .twitter{
 background-color:#33ccff;
}
.cuadros-sociales .google-plus{
 background-color:#e02f2f;
}
.cuadros-sociales .instagram{
 background-color:#2e5e86;
}

HTML:

<div class="cuadros-sociales">
   <div class="item facebook"><a title="Facebook" href="http://facebook.com/" target="_blank"><i class="fa fa-facebook fa-2x"></i></a></div>
   <div class="item twitter"><a title="Twitter" href="http://twitter.com/" target="_blank"><i class="fa fa-twitter fa-2x"></i></a></div>
   <div class="item google-plus"><a title="Google+" href="http://google.com/" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a></div>
   <div class="item instagram"><a title="Instagram" href="http://instagram.com/" target="_blank"><i class="fa fa-instagram fa-2x"></i></a></div>
</div>