字體真棒圖標在桌面 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;
}