Stretching with font awesome and bootstrap

I’ve been working away at the tribute page challenge but I’ve hit a hurdle on the last thing I wanted to add in.

https://codepen.io/TheWordOfTyler/pen/oqXNoE

I’m trying to add some social icons using font awesome. The icons are coming in fine but I can’t align them and the spans I’m putting them in are stretching vertically.

I’ve copied the code for just the buttons I’m trying to make to a blank codepen and they work as intended so maybe bootstrap is interfering?

Any help/insight/knowledge would be greatly appreciated, I’ve been trying to solve this for ages and I’ve found myself up at 2:45am… I’ve been having fun with the coding though so I’ve got that.

Plus if you think I’ve done anything wrong anywhere else please don’t be scared to tell me so.

First you should be nesting i or span elements inside anchor tags where the i or span element is the icon like below:

<div class="social-icons">
  <a href="https://www.youtube.com/channel/UCctXZhXmG-kf3tlIXgVZUlw" target="_blank"><i class="fab fa-youtube"></i></a>
  <a href="https://twitter.com/garyvee" target="_blank"><i class="fab fa-twitter"></i></a>
  <a href="https://www.instagram.com/garyvee/" target="_blank"><i class="fab fa-instagram"></i></a>
</div>

Once you have made the above changes, the replace:

.fab {
  padding: 20px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
  color: white;
}

with:

.fab {
  padding: 20px;
  font-size: 30px;
  border-radius: 50%;
  color: white;
}

Thank you so much, it’s like 99% there now. The only issue I’m getting now is that the YouTube icon isn’t exactly a square unlike the Twitter and Instagram icons, this is making the box around it non-uniform. Any advice for this?

Try setting a fixed height and width for each icon. The trick is the padding for each side must sum to the width/height. I used 60px for width/height, so to center the icon within the circle, I used padding: 15px

.fab {
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding: 15px;
  font-size: 30px;
  border-radius: 50%;
  color: white;
}

For some reason, I had to make the youtube icon use slightly different padding to make it appeared centered.

.fa-youtube {
  background-color: #bb0000;
  padding: 15px 17px 15px 13px;
}