How to make a round border around my social icons?

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

Solution

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.