Issue
.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.
Answered By - Garcia Hurtado
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.