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

这让我很困惑，直到我重读the instructions几次：

＆＃34;您甚至可以在父级上投放更大的图标类，以进一步控制尺寸。＆＃34;

所以你单独留下图标，只需将 .fa-lg 交换为 .fa-2x 在父上，子图标就会增长比例。

 

Answer 2

相当古老的解决方案以及上面有很多类似的评论，但是想告诉我最后做的一件事，万一有人遇到类似的事情。我需要外部字体为常规尺寸，内部要小。我不想为此创建一个类，因为它只在一个地方使用。我最后只是在内部字体中添加了一个样式类。

<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x" style="font-size:9px"></i>
</span>

如果你有一个1关，你需要类似的东西，那么你可以考虑上面的或创建额外的类，如果你在很多地方使用。如果我要创建类，我会做类似于（未经测试的）

fa-stack-xs {font-size:.6em}
fa-stack-sm {font-size:.8em}

所以，它们可以像

一样使用

<span class="fa-stack">
<i class="fa fa-comment-o fa-stack-1x"></i>
<i class="fa fa-plus fa-stack-1x fa-stack-sm"></i>
</span>

我没有在文档中看到这样的内容，所以如果我错过了，我会道歉。

Answer 3

为了让它按照我的预期运行，我改变了字体真棒的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＆amp; 2x选项。所以我添加了一个3x＆amp; 4倍。

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

您可能需要稍微调整一下才能使其正确对齐。 em越高，它们在不同浏览器中的排列越少。

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

Answer 4

类fa-thin-circle-似乎只支持2x，使用CSS（font-size）



.dimensioni_fix {
    font-size: 40px; /* EDIT THIS */
}

.dimensioni_fix { font-size: 40px; /* EDIT THIS */ } http://jsfiddle.net/itpao25/8yPDh/

Answer 5

它可能无法解决您的问题，但这是您要创建的效果吗？

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

因为font-awesome清楚地指定1-x和2-x用于堆叠，然后使用更大的父类用于更大的堆栈。

来自：http://fortawesome.github.io/Font-Awesome/examples/#stacked

要堆叠多个图标，请使用父级的fa-stack类，使用常规大小图标的fa-stack-1x，以及大图标的fa-stack-2x。 fa-inverse可以用作替代图标颜色。您甚至可以在父级上放置更大的图标类，以进一步控制大小调整。

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

5 个答案: