Awesome fonts not displaying as a circle and the logo is half out of the circle!

[JoTidman]

Hi all,
I’m new to bootstrap and I stumbled across social media buttons so thought I’d like to use it too. I’m re-writing my website to get away from iframes! I got the coding from here: https://www.w3schools.com/howto/howto_css_social_media_buttons.asp
My trouble is that the icon displays as an oval not a circle and the facebook symbol F is half out of the oval to the right hand side. I don’t know whether it’s something wrong with my code for the fonts in the code pen clip I’ve included or if it’s something else in my whole page interfering with it. I’ve spent two days tweaking things and tried different versions but nothing seems to be working. Can anyone help please?

https://codepen.io/anon/pen/GwVyxJ

[JoTidman]

the code pen doesn’t seem to work, I’m not sure why. I’m new to all this!
https://codepen.io/anon/pen/GwVyxJ

[Paulie_D]

If something is displaying as an oval and not a circle then either its not initially a square or your border radius is wrong.

Start there.

https://codepen.io/Paulie-D/pen/jXNaZj

[JoTidman]

Hi Thanks for the reply. I can’t see what other code might be affecting it. Here’s the link to my temporary site. The problem is in the footer. http://www.rockclick.co.uk/index1.htm

[JoTidman]

Is anyone able to have a look at the code on my index page to see what might be causing the problem? Thank you.

[Beverleyh]

Troubleshooting a whole website’s codebase via the developer console isn’t a very appealing prospect to potential helpers; All the extra code and distractions takes time to filter out and work around, and many of us will be limited by the device we’re browsing on at the time, so these types of requests are less likely to be answered. Have you used the developer console to search for the problem yourself though? Hit F12 in your browser and start inspecting the problematic elements to see all the CSS that’s applied. You’ll be able to see the immediate icon CSS, but also any other styles from higher up the cascade that might be affecting things. You’ll also be able to use the developer console to write new CSS to fix the problem live in the browser. In addition to what Paulie_D already suggested, line-heights and paddings are likely to be contenders for causing the issue too.

[wolfcry911]

in the .fa class change the width to 70px

[JoTidman]

Thank you wolfcry911. That’s done the trick.
I was really hoping it would be something simple that someone would just be able to pick out!
Thank you very much. :-)

[Author]

Posts