Stretching with font awesome and bootstrap

Stretching with font awesome and bootstrap
0.0 0

#1

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.

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.


#2

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;
}

#3

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?


#4

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;
}