如何增加里面有文字的字体真棒图标大小（使用fa-stack）答案

【问题标题】：How to increase font-awesome icon size which has text inside of it (using fa-stack)如何增加里面有文字的字体真棒图标大小（使用fa-stack）
【发布时间】：2015-08-04 00:56:50
【问题描述】：

我想把文字放在字体很棒的图标（fa-circle）中。我遇到了这个 SO 帖子：How can I overlay a number on top of a FontAwesome glyph?

第二个答案（投票最多的答案）使用此代码：

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

我希望文本在一个圆圈内，所以我将“fa-star-o”更改为“fa-circle”，如下所示：

<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-stack-1x">Sample text here.</i>
</span>

但圆圈有点太小，文字不适合圆圈内，所以我试着把圆圈变大。在此链接中：http://fortawesome.github.io/Font-Awesome/examples/ 它说“您甚至可以在父级上放置更大的图标类以进一步控制大小”。

我不太确定如何执行上述操作。我绑了

<span class="fa-stack fa-lg">
    <i class="fa fa-circle fa-stack-2x fa-lg"></i>
    <i class="fa fa-stack-1x">Sample text here.</i>
</span>

但它不会使圆圈变大。

知道如何让字体很棒的图标变大吗？

【问题讨论】：

标签： css responsive-design font-awesome

【解决方案1】：

当图标是堆栈的一部分时，您不能独立于堆栈的其余部分更改其大小。

但是，您可以通过将 fa-1x fa-2x fa-3x 等类之一添加到父类来更改堆栈的整体大小，如下面的 sn-p 所示。

<span class="fa-stack fa-2x">
    <i class="fa fa-circle fa-stack-2x"></i>
    <i class="fa fa-stack-1x fa-inverse">1</i>
</span>
<span class="fa-stack fa-2x">
    <i class="fa fa-circle-o fa-stack-2x"></i>
    <i class="fa fa-stack-1x">1</i>
</span>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

【讨论】：

【解决方案2】：

如果您最终尝试将文本放置在带边框的圆圈内，FontAwesome 可能会有点过头了。相反，您可以使用 CSS，请参见下面的示例。

(Demo)

.circle {
  border-radius: 50%;
  border: 2px solid #000;
  height: 0;
  padding-bottom: 100%;
  position: relative
}
.circle span {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 45%;
  left: 0
}

<div class="circle">
  <span>Sample text here.</span>
</div>

【讨论】：

哦，好吧。我只是想使用很棒的字体，因为我想要一种官方记录的方式，这将是最向后兼容的（而不是 css hack）。回去工作后，我会尝试您提供的代码。谢谢。