Font-Awesome堆栈无法正常工作？

Question

Font Awesome的奇怪问题.我正试图在我的社交媒体图标周围做一个更大的圈子.

如果我将第一个堆叠图标更改为大于2x的大小,则会恢复为1x大小.

此代码有效:

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

此代码不会:

  <span class="fa-stack fa-lg">
    <i class="fa fa-circle-thin fa-stack-3x"></i>
    <i class="fa fa-facebook fa-stack-1x"></i>
  </span>

如果我使用3x或4x等,则较低的图像会恢复到正常大小.这是一个错误,还是我在这里做错了什么？

使用Font Awesome v 4.1.0.

编辑 - 因为这个笔记不断得到意见/评论.我的问题是font-awesome只有1x和2x的比例,我想要一个更大的背景图像和一个更小的图标(更像是4x).

Answer 1

这让我很困惑,直到我重读了几次说明:

"你甚至可以在父母身上投放更大的图标类,以进一步控制尺寸."

所以你只留下图标,只需在父母上交换.fa-lg for .fa-2x ,子图标按比例增长.

<span class="fa-stack fa-2x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>

Answer 2

为了让它按照我的预期工作，我更改了 font-awesome CSS 文件。在第 168 行，它看起来像这样：

.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}

请注意，堆栈只有 1x 和 2x 选项。所以我添加了 3x 和 4x。

.fa-stack-1x,
.fa-stack-2x,
.fa-stack-3x,
.fa-stack-4x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-stack-3x {
  font-size: 3em;
}
.fa-stack-4x {
  font-size: 4em;
}

您可能需要进行更多调整才能使其恰好对齐。它们的级别越高，它们在不同浏览器中正确排列的情况就越少。

但是，最终，我最终使用了边框，因为我们想在手机尺寸上做一些不同的事情，并且在 @media 查询中编辑 CSS 更简单。