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?
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.