Question

我正在尝试在圆圈内创建fontawesome图标，我已经使用了边框css来实现。但是，对于不同的字体图标，边框不是圆形的，它会改变某些图标（如facebook）的形状。

我有以下代码片段，其中facebook边框不是圆形的。你能不能告诉我如何为所有图标实现圆形（精确圆圈）边框，无论它们的大小如何（事件推特和服务器图标看起来都不像是统一的圆圈）？

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

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

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

试试这堂课：

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

Answer 4

尝试这种方式：

HTML

<a class="align-items-center justify-content-center border d-flex roundbutton shadow text-decoration-none" href="#">
<i class="fab fa-facebook-f fa-2x fa-fw" aria-hidden="true" style="color: #4267b2"></i>
</a>

CSS：

    .roundbutton {
    display: block;
    height: 4vw;
    width: 4vw;
    border-radius: 50%;
    border: 1px solid red;

}

.socialSignInBtns:hover {
    opacity: 0.7;
}

带圆圈的FontAwesome图标

4 个答案: