CSS rounded corners not working on all icons

Question

Can someone please tell me why the border-radius:50% property doesn't work on all icons? I have to write different padding settings for each, but i want to do all the same.

 .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> 

Demo: https://jsfiddle.net/hqwg00qf/5/

Answer 1

It works, corners are rounded.

Problem is in setting width for inline a elements, which doesn't work (you can't set width/height to inline elements). Add display: inline-block to links.

.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

just add css display:inline-block to your icons

.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> tag default display type is 'inline';

So,Just add

.social a {
   display:inline-block;
}

I think it solve you problem.

Thank you.