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;
}