JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div id="button1">
  <a href="#" class="btn btn-sq-lg btn-primary">
    <i class="fa fa-user fa-5x"></i>
    <br/><h2>Demo Primary</h2>
  </a>
</div>

CSS

.btn-sq-lg 
{
  width: 200px;
  height: 200px;
  text-align: center;
  vertical-align: middle !important;
}
.fa{
    padding: 19px;
    font-size: 4em;
}
#button1
{
  vertical-alignment: middle;
}
h2{
  font-size:20px;
}
i {
  
  border-radius: 999px;
  display: table;
  width: 100px; height: 100px; 
  background-color: lightgreen;
  }