html - Font Awesome Icon Alignment -


i'm trying home button in header within div aligning under div/header.

i have 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 displaying icon below div...

any advice?

  • you need change line-height 60px( same value has height) if want vertically aligned

  • don't need set other rules 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>


Comments

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -