CODEWITHSUNDEEP
bootstrap-4font-awesomevertical-alignment
MechMK1
MechMK1

Reputation: 3378

How to vertically align font-awesome icons in a button?

My goal is to create a block button with a related icon. Since Bootstrap 4 does not natively support glyphicon anymore and I would prefer using fonts or SVG images over PNG images, I have chosen to use font-awesome v5.

My problem is that the icon is slightly above the text and does not want to center itself, no matter what I tried.

Several answers here on StackOverflow suggested using the vertical-align property [1][2], but this seems to be completely ignored by the icon. I suppose this is due to the fact that both questions were asked in 2013 and font-awesome has been updated since then.

I tried messign with flexboxes, but this ended up moving both the text and the icon. I also tried applying the align-middle class to the span, but it didn't work either.

Here is my code so far:

<div class="container">
  <p>
    <a class="btn btn-lg btn-primary btn-block" role="button">
      <span class="fas fa-music fa-lg float-left my-icon"></span> 
      <span class="my-text">Music</span>
    </a>
  </p>
</div>

JSFiddle Link

As you can see, the icon is still elevated over the text, and I have no idea how to align it vertically.

Upvotes: 0

Views: 6009

Answers (2)

zer00ne
zer00ne

Reputation: 43910

Update

  • Replaced the Font Awesome 4.7 stylesheet with 5.0.13

  • Removed both <span>s (all content of <a> is now pseudo-elements)

  • Removed <p> (extra markup isn't needed, a.btn-block is already display:block)

  • Used the pseudo-elements ::after (text) and ::before (icon)

JSFiddle

Demo

.icon {
  position: relative;
}

.icon::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #fff;
  position: absolute;
  left: 0.5em;
  font-size: 1.2em
}

.icon::after {
  color: #fff;
}


/* Music */

.music::after {
  content: 'Music';
}

.music::before {
  content: '\f001';
}


/* No-Microphone */

.no-mic::after {
  content: 'Mute Mic';
}

.no-mic::before {
  content: '\f539';
}


/* Play */

.play::after {
  content: 'Play';
}

.play::before {
  content: '\f04b';
}
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' rel='stylesheet'>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">


<div class="container">
  <a class="btn btn-lg btn-primary btn-block icon music" role="button"></a>

  <a class="btn btn-lg btn-danger btn-block icon no-mic" role="button"></a>

  <a class="btn btn-lg btn-success btn-block icon play" role="button"></a>
</div>

<script src='https://code.jquery.com/jquery-3.3.1.slim.min.js'></script>
<script src='https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js'></script>

Upvotes: 1

Carol Skelly
Carol Skelly

Reputation: 362430

The float-left on the icon is throwing off the vertical alignment. If you want the icon aligned to the left, and the text centered, you can use flexbox and defined widths like this...

<a class="btn btn-lg btn-primary btn-block d-flex align-items-center px-0" role="button">
      <span class="w-25 fas fa-music fa-lg my-icon"></span> 
      <span class="w-50 my-text">Music</span>
      <span class="w-25"></span>
</a>

If you want both icon and text centered it's much simpler. Just remove the float and add align-middle to the btn...

<a class="btn btn-lg btn-primary btn-block align-middle" role="button">
  <span class="fas fa-music fa-lg my-icon"></span> 
  <span class="my-text">Music</span>
</a>

Demo: https://www.codeply.com/go/iJV8uQDVVD

Upvotes: 3

Related Questions