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 hasheight
) if want vertically aligneddon't need set other rules
i
, becausefont-awesome.css
already 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
Post a Comment