如何在我的社交图标周围制作圆形边框？答案

【问题标题】：How to make a round border around my social icons?如何在我的社交图标周围制作圆形边框？
【发布时间】：2015-01-27 14:05:12
【问题描述】：

   .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 并单击第一个链接。

【问题讨论】：

链接失效！！
给我们看一个例子。例如，您可以在此处显示 jsfiddle 或 codepen

标签： html css border font-awesome-4

【解决方案1】：

暂时忽略“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 的纵横比）。我还添加了固定宽度和高度以适应不同大小的徽标。

【讨论】：

谢谢！对不起班级名称。我将其修复为.icon。无论如何，我怎样才能让图标彼此间隔。
@NickAllaire 一个简单的边距就可以了。我已经用新的班级名称、保证金和 Gjermund 的 50% 更新了我的答案。如果这解决了您最初的问题，请接受我的回答为有效。谢谢！

【解决方案2】：

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

提示：使用边框半径：50%；得到任意大小的圆框。

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

【讨论】：