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

Question

我想将文本放在字体超棒的图标（fa 圆）内。我遇到了这个 SO post: 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' to '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>

但是圆圈有点小，文字放不下圆圈，所以我试着把圆圈放大一点。在这个 link: http://fortawesome.github.io/Font-Awesome/examples/ 它说 "You can even throw larger icon classes on the parent to get further control of sizing".

我不太确定如何执行上述操作。我并列

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

但并没有使圆变大

知道如何使超棒的字体图标变大吗？

Answer 1

如果您最终想将文本放置在带边框的圆圈内，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>

Answer 2

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

但是，您可以通过将 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">

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

How to increase font-awesome icon size which has text inside of it (using fa-stack)

css

responsive-design

font-awesome