Q:

Font Awesome Icon Alignment

I'm trying to get my home button in the header within a div but it is aligning under the div/header. 
I have this code:

.home-button {
  background: #333;
  width: 59px;
  height: 60px;
  float: right;
  line-height: 180px;
  text-align: center;
  vertical-align: bottom;
}
div.home-button i.fa {
  display: inline-block;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<div class="home-button">
  <i class="fa fa-home" aria-hidden="true"></i>
</div>

but it is displaying with the icon below the div...
Any advice?  

A:

you need to change your line-height to 60px( same value has your height) if you want it vertically aligned
don't need to set other rules to i, because font-awesome.cssalready handles that

.home-button {
  background: #333;
  width: 59px;
  height: 60px;
  line-height:60px;
  float:right;
  text-align: center;
  vertical-align: bottom;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<div class="home-button">
  <i class="fa fa-home" aria-hidden="true"></i>
</div>

