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

我认为它可以解决您的问题。

谢谢。