While working on incorporating font awesome share icons into my project, I encountered an issue with getting a circle around them. After exploring various approaches, I opted for a CSS solution. Using React FontAwesome posed some challenges that led me to this decision.
<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;
}Although the code successfully displays the font awesome icons, there's an issue with the border-radius causing trimming on the sides of the icons.
(The effect is particularly noticeable on the LinkedIn icon)
If I remove the margin, the icons enlarge but are still affected by the border-radius trimming.
This problem occurs in Safari specifically, while Chrome and Firefox render the icons correctly. In Firefox, adjusting the width resolves the rendering issue.
UPDATE (including a temporary workaround)
In order to prevent white padding from covering the icon inside the circle on Safari, I had to resort to intricate adjustments for specific widths and heights. These values aren't even consistent. Any less cumbersome solutions would be greatly 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;
}