带有圆圈的FontAwesome图标

Question

我正在尝试在一个圆圈内创建fontawesome图标，并且我使用了边框CSS来实现。但是，对于不同的字体图标，边框不是圆形的，它会更改某些图标的形状，例如facebook。

我有以下代码段，其中Facebook边框不是圆形的。您能否让我知道如何为所有图标实现圆形（精确的圆圈）边框，而不论其大小如何（事件推特和服务器图标看起来不像是统一的圆圈）？

https://jsfiddle.net/1d7fvLy5/1/

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

i.fa:hover{
  color:lightblue;
   border: 2px solid lightblue;
  cursor:pointer;
}

Answer 1

将width: 1em;和text-align: center;添加到i.fa应该可以。

Answer 2

如果需要，您可以使用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>

这里是小提琴：https://jsfiddle.net/1d7fvLy5/2/

这是fontAwesome http://fontawesome.io/examples的示例页面>

Answer 3

要制作一个完美的圆，您只需要一个正方形而不是一个矩形。

Answer 4

尝试这种方式：