How to make a round border around my social icons?

Question

   .icon {
        padding: 5px 10px;
        display: inline-block;
        -moz-border-radius: 100px;
        -webkit-border-radius: 100px;
        border-radius: 100px;
        -moz-box-shadow: 0px 0px 2px #888;
        -webkit-box-shadow: 0px 0px 2px #888;
        box-shadow: 0px 0px 2px #888;
    }

    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css">
    <div class="icon">
    <i class="fa fa-fw fa-facebook"></i>
        </div>
    <div class="icon">
    <i class="fa fa-fw fa-google-plus"></i>
        </div>
    <div class="icon">
    <i class="fa fa-fw fa-twitter"></i>
    </div>
        <div class="icon">
    <i class="fa fa-fw fa-linkedin"></i>
        </div>

I want to have my social icons have a round border. I want my social icons to have the borders exactly like this website: http://www.krishinternationalinc.com (if you scroll all the way down to the bottom you can see the social icons). I already tried using the border radius but it does not change anything after 100px. Also how do I make the icons spaced between each other? If the link does not work please go to google and type in krishinternationalinc.com and click the first link.

Answer 1

Ignoring for a minute that "i" is a seriously terrible name for a CSS class, and leaves me unsure as to whether you have a typo in the class declaration of your CSS, this should fix your problem:

.icon {
    padding: 5px 5px 5px 5px;
    margin-right: 5px;
    width: 20px;
    height: 20px;
    display: inline-block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: 0px 0px 2px #888;
    -webkit-box-shadow: 0px 0px 2px #888;
    box-shadow: 0px 0px 2px #888;
}

In short: the padding must be equal on all sides, so that the aspect ratio of the outline doesn't get streched (a circle always has a 1:1 aspect ratio). I also added fixed width and height to account for different sized logos.

Answer 2

You have uneven padding. If you want a full circle you need the same width as height, or in your code, the same padding.

Tip: Use border-radius: 50%; to get circle of a box in any size.

.i{
 padding: 20px;
 border-radius: 50%;
 border: 1px solid #FFF; /* White */
}

Answer 3

.icon{
     width: 30px;
     height: 30px;
     border: 1px solid white;
     margin-left: 5px;
     position: relative;
     border-radius: 50%;
}
.fa{
     color: #fff;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
}

    enter code here