Line up text under Font Awesome icon

I am trying to display font awesome icon in a box like a button. I've been able to do that. So far so good...It'll look like this. without hover and with hover

HTML

 <div class="fa-hover">  
 <a href="www.awtsoft.com"><i class="fa fa-pencil-square-o fa-3x" aria-hidden="true"></i>New Post</a>   
 </div>  

CSS

 .fa-hover a {  
   overflow: hidden;  
   white-space: nowrap;  
   display: block;  
   color: #222;  
   line-height: 20px;  
   height: 80px;  
   padding: 10px;  
   border-radius: 4px;  
   border: 2px dotted greenyellow;  
 }  
 .fa-hover a:hover {  
   background-color: #1d9d74;  
   color: #fff;  
   text-decoration: none;  
 }  
 a i.fa {  
  display: block;  
  text-align: center;  
 }