CSS圓角不適用於所有圖標

Question

有人可以告訴我為什么border-radius:50%屬性不能在所有圖標上使用嗎？ 我必須為每個腳本編寫不同的填充設置，但我都希望這樣做。

 .social a { font-family: "FontAwesome"; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; line-height: 0; width: 20px; position: relative; text-align: center; color: white; top: 62px; left: 25%; font-size: 22px; padding: 20px; cursor: pointer; background-color: #2f5183; border-radius: 50% !important; transition: 0.3s; text-decoration: none; } 

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="social"> <a href="#" class="facebook"><i class="fa fa-facebook"></i></a> <a href="#" class="google"><i class="fa fa-google"></i></a> <a href="#" class="twitter"><i class="fa fa-twitter"></i></a> </div> 

演示： https ： //jsfiddle.net/hqwg00qf/5/

Answer 1

可以，圓角是圓的。

問題在於為inline元素設置width是行不通的（不能為內聯元素設置寬度/高度）。 添加display: inline-block鏈接。

.social a {display: inline-block; ...}

https://jsfiddle.net/hqwg00qf/19/

Answer 2

將display: inline-block css屬性設置為選擇器.social a https://jsfiddle.net/hqwg00qf/31/

Answer 3

只需將CSS display：inline-block添加到您的圖標

.social a {
    display:inline-block;
    font-family: "FontAwesome";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    line-height: 0;
    width: 20px;
    position: relative;
    text-align: center;
    color: white;
    top: 62px;
    left: 25%;
    font-size: 22px;
    padding: 20px;
    cursor: pointer;
    background-color: #2f5183;
    border-radius: 50% !important;
    transition: 0.3s;
    text-decoration: none;
}

https://jsfiddle.net/hqwg00qf/40/

Answer 4

<a></a>標記的默認顯示類型為“內聯”；

因此，只需添加

.social a {
   display:inline-block;
}

我認為它可以解決您的問題。

謝謝。