字体真棒图标在桌面 safari 上以 50% 的边框半径修剪角落

Question

我正在尝试围绕我的字体很棒的共享图标创建一个圆圈。 我决定用 ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ 方法 go ，因为我不知道如何用 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; }

我的代码生成了令人敬畏的字体图标，但 50% 的边框半径最终会修剪掉图标的侧面。

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

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

此问题发生在 Safari 上，但不在 chrome 或 firefox 上。 在 firefox 上，如果我将宽度设置得足够大，图标就会完全出现

---

更新（带有临时hacky解决方案）

在 safari 中，我必须做一些非常挑剔的事情，以阻止白色填充覆盖圆圈内的图标。 我必须指定非常具体的宽度和高度来防止这种情况，而这些宽度和高度甚至不是相同的值。 如果有人可以发布一个不那么骇人听闻的解决方案，那将不胜感激。

 <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

您不应该直接设置 FontAwesomeIcon 组件/图标的样式。 填充和边界半径干扰实际图标。 您应该为每个图标创建一个单独的包装器，并将您的“faCircle”class 应用到这个包装器。 所以我相信在你的情况下，将 class 从 FontAwesomeIcon 移动到 FacebookShareButton 应该可行。

这是 font-awesome 页面的屏幕截图，当我通过样式化 'info-icons' 包装器直接对其进行编辑时。

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