位置堆叠字体awesome图标

Question

我正在尝试通过将fa-circle堆叠在fa-square-o上来创建一个“素食主义者”图标。问题是，圆圈与正方形的垂直中心对齐不准确。我尝试使用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>

- Shreyans

---

你的正方形要加倍大小，圆形则要减半大小，找一个更小的圆形或点，你也可以将其加倍大小，然后它们应该对齐。 - Mousey

Answer 1

您可以通过添加top属性将其向上移动：

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

- razemauze

---

谢谢！我不知道为什么填充和边距没有起作用。 - Shreyans

填充不能为负数，但是.fa-stack-1x { margin-top: -1px; }应该可以工作。 - razemauze

Answer 2

通过看下面的例子，您可以快速猜到，使圆形居中的问题并不是由于圆形vertical-align(垂直对齐)属性引起的，而是由于height(高度)，或top和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>

圆形无法适应正方形，因为.fa-stack-2x类的font-size值默认为2em，太小了，使得圆形无法适应正方形。

最简单的解决方法是增加作为fa-stack-2x元素使用的图标的font-size值。

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

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

<span class="fa-stack fa-4x">
    <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-3x">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-1x"></i>
</span>

<span class="fa-stack fa-2x">
    <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-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-circle fa-stack-1x"></i>
</span>

- DavidDomain

---

这应该是正确答案。但是为什么会出现这种情况？这是一个 bug 吗？ - alias51

Answer 3

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

一种轻松堆叠多个图标的方法。在父元素上使用 icon-stack 类，并在底部图标上使用 icon-stack-base。根据您使用的实现方式，您可能需要将 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的unifont。

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

- Mousey