Question

我想将文字放在字体 - 真棒图标（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>

但它不会使圆圈更大。

知道如何让字体真棒图标更大吗？

Answer 1

如果你最终试图将文本放在一个有边界的圆圈内，FontAwesome可能有点过分。相反，您可以使用CSS，请参阅下面的示例。

（Demo）

＆＃13;

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

＆＃13;

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

＆＃13;

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

如何增加其中包含文本的font-awesome图标大小（使用fa-stack）

2 个答案: