字体很棒的图标在桌面野生动物园中以50％的边框半径修剪了角落

Question

我正在尝试在字体超赞的共享图标周围创建一个圆圈。我决定选择css approach，因为我不知道如何使用React FontAwesome来执行other approaches

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

我的代码产生了很棒的字体图标，但是边界半径为50％最终会修剪掉图标的侧面。

（效果在LinkedIn图标上最明显）

如果删除边距，图标会变大，但仍会被边框半径修剪

此问题在Safari上发生，但在chrome或firefox上没有。在firefox上，如果我将宽度设置得足够大，图标将完全显示]

Answer 1

您不应该直接设置FontAwesomeIcon组件/图标的样式。填充和边框半径正在干扰实际图标。您应该为每个图标创建一个单独的包装，并将“ faCircle”类应用于该包装。因此，我相信在您的情况下，将类从FontAwesomeIcon移至FacebookShareButton应该可行。

这里是字体真棒页面的屏幕截图，当我通过设置'info-icons'包装器的样式直接对其进行编辑时。