[英]Remove white border around font awesome icon
我一直在嘗試將字體真棒圖標破解為藍色,圖標為白色,但這是我最接近的。 知道我需要添加/刪除什么嗎? 嘗試了透明邊框,刪除填充/邊距,定位在一個跨度后面,沒有運氣。
.b-social-media-shares__a { width: 48px; height: 48px; border-radius: 50%; text-align: center; margin: 0 6px; &:hover { box-shadow: 1px 3px 5px grey; } i { color: white; line-height: 48px; font-size: 25px; } }.b-social-media-shares--facebook { background-color: #4267B2; }.b-social-media-shares--facebook.fa-facebook-f { color: #4267B2; line-height: 48px; font-size: 28px; }.b-social-media-shares--facebook.fa-facebook-f:before { content: "\f09a"; background-color: white; border-radius: 50%; }.b-social-media-shares--facebook:hover { background-color: white; }.b-social-media-shares--facebook:hover i { color: #4267B2; }
<a id="facebook" href="" class="b-social-media-shares__a b-social-media-shares--facebook dnt" target="_blank"> <i class="fab fa-facebook-f"></i> </a>
一些不必要的和一些沖突的 styles。 查看代碼中的注釋:
.b-social-media-shares__a {
display: inline-flex; // added
align-items: center; // added
justify-content: center; // added
text-decoration: none; // added, but not required (removes the underline)
width: 48px;
height: 48px;
border-radius: 50%;
// text-align: center; // not required because of `justify-content`
margin: 0 6px;
&:hover {
box-shadow: 1px 3px 5px grey;
}
i {
color: white;
// line-height: 48px; // not really required
font-size: 25px;
}
}
.b-social-media-shares--facebook {
background-color: #4267b2;
}
.b-social-media-shares--facebook .fa-facebook-f {
// color: #4267b2; // not required (it should be white)
// line-height: 48px; // not really required
font-size: 28px;
}
// This whole ruleset is not required
// .b-social-media-shares--facebook .fa-facebook-f:before {
// content: "\f09a";
// background-color: white;
// border-radius: 50%;
// }
.b-social-media-shares--facebook:hover {
background-color: white;
}
.b-social-media-shares--facebook:hover i {
color: #4267b2;
}
也許作為替代解決方案,您可以將“f”放在藍色圓圈中
我做了這個片段,我希望它有幫助:
https://codesandbox.io/s/icy-dust-2vfvi?file=/src/index.js:69-132
沒有邊框...您將圓形圖標放在比圖標大的圓形元素內。 包裝元素具有白色背景和藍色邊框。 此背景顯示在您的圖標后面。
改變
.b-social-media-shares--facebook .fa-facebook-f:before {
background-color: white;
}
要有藍色背景...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.