Hello everyone. I am getting back to the Portfolio Page project, and I can not find the way to fix the mistake that is driving me crazy.
Why is the Facebook icon not round? My guess is that I get something about Bootstrap columns and offset wrong, but what is it?
UPD Oh wow it looks so messed up on the preview screen I probably get everything wrong.
I think it could have something to do with the original dimensions of the icon. If one side is longer than the other it will end up as an oval when you edit the border radius.
You could try specifying the exact width and height of each div the icons reside in. Make sure they are square though
Thank you very much, you’re absolutely right.
I have not fixed it yet, but if I add “fa-rotate-180” class to the div where the Facebook icon resides, it becomes a horizontal oval instead of a vertical one. Therefore it does not have anything to do with Bootstrap columns.
You should fix the width and the height of your element than set the dorber radius to 50%.
This is just one solution, there might be better ideas out there: I deleted the line-height, set both the width/height of the circles to 60px and played with the padding-top until it looked good… so if you change the fa size, you will have to play with the top padding.
Thank you! I will try playing with fa, too. The funny thing is I did not realize that font awesome icons are not all square by default.
