Css 一个带圆圈的图标

我试图在一个圆圈内创建一个很棒的图标，我使用了边框css来实现同样的效果。但是，对于不同的字体图标，边框不是圆形的，它会改变一些图标（如facebook）的形状

我有以下代码片段，其中facebook边框不是圆形的。您能告诉我如何实现所有图标的圆形（精确圆形）边框，而不管其大小（活动twitter和服务器图标看起来不像统一的圆形）吗

---

增加

宽度：1米和
文本对齐：居中到
i.fa
应该有效。
添加
宽度：1米和
文本对齐：居中
to
i.fa
应该可以使用。
要形成一个完美的圆，你只需要一个正方形，而不是一个矩形

这意味着你的身高必须等于你的宽度

尝试以下课程：

i.fa {
  margin: 0.5em;
  font-size: 4em;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  text-align: center;
  color: #303030;
  border: 2px solid #303030;
  border-radius: 50%;
  padding: 0.5em;
  transition: all .5s ease;
}

要形成一个完美的圆，你只需要一个正方形，而不是一个矩形

这意味着你的身高必须等于你的宽度

尝试以下课程：

i.fa {
  margin: 0.5em;
  font-size: 4em;
  height: 1.2em;
  width: 1.2em;
  line-height: 1.2em;
  text-align: center;
  color: #303030;
  border: 2px solid #303030;
  border-radius: 50%;
  padding: 0.5em;
  transition: all .5s ease;
}

如果需要，可以使用fontAwesome的堆叠图标功能，如下所示：

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>



这是一把小提琴：

下面是fontAwesome的示例页面
如果您愿意，可以使用fontAwesome的堆叠图标功能，如下所示：

<span class="fa-stack fa-lg">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>



这是一把小提琴：

下面是fontAwesome的示例页面，请尝试以下方法：

HTML

试着这样做：

HTML

经过一段时间的尝试后，这看起来真的很神奇谢谢你，理查德。干杯经过一段时间的尝试后，这看起来真的很神奇谢谢你，理查德。干杯谢谢分享关于堆叠的信息。我不知道。别忘了
fa-fw
类。我不知道Font5是否还在使用它，但是，它在图标上设置了一个固定的宽度。谢谢分享关于堆叠的内容。我不知道。别忘了
fa-fw
类。我不知道Font5是否还在使用它，但是，它在图标上设置了一个固定的宽度。你能看看这个吗？你能调查一下吗？
    .roundbutton {
    display: block;
    height: 4vw;
    width: 4vw;
    border-radius: 50%;
    border: 1px solid red;

}

.socialSignInBtns:hover {
    opacity: 0.7;
}