Help : stuck into perfect circle

HTML-CSS
1

Hi all :slight_smile:

Today I’m playing with social media buttons !
I start with icons handling and I would like them into circle and centered into the page.

I’m having trouble with circle sizing.
When I have a look on webdev tool, I can not figure why my circle haven’t all the same size…as they are all same sizing till I add icons.

So, how can I achieve 4 circle which stay the same size with icons in it ?

I tried different things and now I’m sweating and feeling like a giant crockpot with all the stuff in it and power outage…Should I use my flex in another way ? Or don’t use it for this case ? Is it a box sizing question ? or related to icons size ? Some theoretical pan I could dig more ?

I know, google could help me but well, I look for few human interaction too…
here is my code : Buttons of Wrath

Thxx for your reading/time/patience and clues <3 I hope my question is clear enough…otherwise, I can try to precise
Have a nice day/night

Note/ I put it first into programming help but well maybe it was not the right field, sorry uuuh
Note2/ok I finally resolve - use fa-2x instead of font-size 2.5em

2 Likes
2

Well, you put all other icons inside A tag but you didn’t put the third one inside A,
About the icon size, don’t worry they are the same, the LinkedIn icon shape is square, but other icons are circle based, so it will show something else on the inspector, but initially, at the viewport they are the same size.

3

Hey @itsbob thanks for your answer

  • Icon/anchor : yes, I tried some infinite anim with this circle so I thought add something clickable in it was useless. But, it could be the challenge, catch the clickable !

  • In fact, the third one appeared slightly elliptic. It looks like a struggle with font-size property and icon so, I deleted font-size and add a size class to the icon.
    After that, all circle look the same but, indeed, the measurements are still different into web dev tool and I’m still trying to understand why