Stretching with font awesome and bootstrap

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.

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.

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?