css - 如何增加里面有文字的超赞字体图标大小(使用 fa-stack)

Question

我想将文本放在字体超棒的图标(fa 圆)内。我遇到了这个 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>

但它不会使圆变大。

知道如何让 Font Awesome 图标变大吗？

Answer 1

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

但是，您可以通过添加 fa-1x fa-2x fa-3x 之一来更改堆栈的总体大小等父类，如下面的代码片段所示。

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