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

我想让我的社交图标有一个圆形边框。我希望我的社交图标具有与此网站完全相同的边框：http ://www.krishinternationalinc.com （如果您一直向下滚动到底部，您可以看到社交图标）。我已经尝试过使用边框半径，但它在 100 像素后没有任何改变。另外，如何使图标彼此间隔？如果链接无效，请访问谷歌并输入 krishinternationalinc.com 并单击第一个链接。

4

2 回答 2

2

暂时忽略“i”对于 CSS 类来说是一个非常糟糕的名称，让我不确定您的 CSS 的类声明中是否有错字，这应该可以解决您的问题：

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

简而言之：内边距必须在所有边上都相等，这样轮廓的纵横比就不会被拉伸（圆形总是有 1:1 的纵横比）。我还添加了固定的宽度和高度以适应不同大小的徽标。

于 2014-11-28T22:45:57.870 回答
0

你有不均匀的填充。如果你想要一个完整的圆圈，你需要与高度相同的宽度，或者在你的代码中，相同的填充。

提示：使用border-radius：50%；得到任何大小的盒子的圆圈。

.i{
 padding: 20px;
 border-radius: 50%;
 border: 1px solid #FFF; /* White */
}
于 2014-11-28T22:46:41.630 回答