Can't get icon to center inside its padding

Hello! In my document I am trying to get icons to stay in the center of their padding, but for some reason they are sticking to the top of it. I have tried to use vertical align to push them to the middle and bottom, but even then, they do not move enough. How would I get my icons into the center of the white padding circle?

Document: https://codepen.io/daniel-albano/full/qBWrdoV

a few ways to do it. Heres one way:
inside of .contact-links > ul li a change display:inline-block to display:inline
is this the look you are trying to achieve?

1 Like

I was thinking centered more like this. I was hoping I could do something with animation to make the white background gradually blend into a different color based on whichever social media platform uses for their logos colors using hover.

Almost exactly like in this video: https://www.youtube.com/watch?v=QaSLBMqPb2U

I do want to use different icons than they used though, but I can’t seem to get them to follow the height and width commands without centering weird. It’s almost like there is too much space around the icon or something.

Thank you for trying to help out! I figured something out by using the line-height command in css I was able to align the icons vertically.