css - 带圆圈的 FontAwesome 图标

Question

我正在尝试在一个圆圈内创建令人惊叹的字体图标，并且我使用了边框 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 应该可以。