CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Waqar Haider
Waqar Haider

Reputation: 971

align icon on top of text inside button tag

How can I align the icon inside a button tag to the top of the text, it is currently on the left side of the text. I can't figure out how.

Here is the code

<div class='nav'>
  <button class="home btn">
      <i class="btnIcon fa fa-home"></i>
       <span>HOME</span>
    </button>
</div>

Upvotes: 2

Views: 10267

Answers (1)

Paulie_D
Paulie_D

Reputation: 115047

The simplest method would be to just declare the span as display:block

span {
  display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class='nav'>
  <button class="home btn">
  <i class="btnIcon fa fa-home"></i>
   <span>HOME</span>
</button>
</div>

Or use Flexbox and column layout

.btn.vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class='nav'>
  <button class="home btn vertical">
  <i class="btnIcon fa fa-home"></i>
   <span>HOME</span>
</button>
</div>

Upvotes: 9

Related Questions