位置堆叠字体真棒图标

Question

我试图通过在fa-square-o上堆叠fa-circle来创建一个“素食”图标。问题是圆圈不是相对于正方形垂直居中对齐的。我尝试使用margin / padding / vertical-align css属性，但它们没有任何效果。我的代码是：

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

Answer 1

你可以通过添加一个顶部来移动它：

.fa-stack-1x {
    top: -1px;
}

Answer 2

通过查看以下示例，您可以快速猜出，圈子居中的问题不在于圈子vertical-align值，height或top和{{ 1}}位置。

left

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

.fa-square-o {
  color: rgb(0, 255, 0);
}

.fa-circle {
  color: rgba(255, 0, 0, .5);
}

圆圈不适合广场，因为<span class="fa-stack fa-5x"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-circle fa-stack-2x"></i> </span> <span class="fa-stack fa-5x"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-circle fa-stack-1x"></i> </span>类的font-size值，默认值为.fa-stack-2x，对于适合圆圈而言太小了进入广场。

解决此问题的最简单方法是增加用作2em元素的图标的font-size值。

fa-stack-2x

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css");

.fa-square-o {
    color: rgb(0, 255, 0);
    font-size: 2.16em;
}

.fa-circle {
    color: rgba(255, 0, 0, .5);
}

Answer 3

来自文档http://fortawesome.github.io/Font-Awesome/3.2.1/examples/#stacked

  

一种轻松堆叠多个图标的方法。在父图标和icon-stack-base上使用icon-stack类作为底部图标。您可能需要将icon换成fa，具体取决于您使用的实施方式

所以试试

<span class="icon-stack">
<i class="fa-square-0 icon-stack-base"></i>
<i class="fa fa-circle icon-light"></i>

如果尺寸有问题，您可以使用fa-dot-circle-o然后在其上堆叠一个白色圆圈，只留下一个点 - 或者使用带有middle dot的unicode字体作为圆圈，例如unifoundry's unifont的。

在css中垂直对齐的标准方法是将height和line-height设置为彼此相等，然后设置vertical-align: middle