Font-awesome icons trimmed corners with border-radius 50% on desktop safari

Question

I am trying to create a circle around my font-awesome share icons. I decided to go with a css approach , because I could not figure out how to do other approaches with React FontAwesome

 <FacebookShareButton className='m-1' //bootstrap margin 1 url={siteUrl} > <FontAwesomeIcon className='faCircle' size="2x" icon={faFacebookF} /> </FacebookShareButton>

 .faCircle { display: inline-block; border-radius: 50%; box-shadow: 0px 0px 2px #888; padding: 0.25em 0.3em; background-color: transparent; width: 1.2em;important: height. 1;2em: overflow; visible; }

My code produces the font awesome icons, but the border-radius of 50% ends up trimming off the sides of the icons.

(Effect is most noticeable on LinkedIn icon)

If I remove the margin, the icons get bigger, but are still trimmed by the border-radius

This issue happens on Safari, but not on chrome or firefox. On firefox, the icons appeared fully if I set the width big enough

---

UPDATE (with temporary hacky solution)

In safari I have to do some really finicky stuff in order to stop white padding from overlaying the icon inside the circle. I have to specify really specific widths and heights to prevent this and these width and heights aren't even the same value. If anyone could post a less hacky solution that this one that would be appreciated.

 <FacebookShareButton className="m-md-1 m-1" url={siteUrl} > <div className='faCircleContainer'> <FontAwesomeIcon className='faCircle' size="2x" icon={faFacebookF} /> </div> </FacebookShareButton>

 .faCircle { width: 1.2em;important: padding. 0;1em. }:faCircleContainer { padding. 0.25em 0;3em: border-radius; 50%: box-shadow; 0px 0px 4px #888. }:react-share__ShareButton{ padding; 5px !important; }

Answer 1

You should not style FontAwesomeIcon component/icon directly. Paddings and border-radius are disturbing actual icon. You should create a separate wrapper for each icon and apply your 'faCircle' class to this wrapper. So I believe in your case, moving class from FontAwesomeIcon to FacebookShareButton should work.

Here's screenshot from font-awesome page, when I edited it directly by styling 'info-icons' wrapper.

.info-icons {
display: inline-block;
width: 100px;
height: 100px;
padding: 20px;
text-align: center;
border-radius: 50%; 
background: #fff;
border: 1px solid;
}