使用 Font Awesome 图标中的数字

Question

我想使用数字来列出流程中的步骤。我想知道如何在Font Awesome中实现这一点。

我想要使用带有1、2、3...的圆圈，这可行吗？
Font Awesome会将数字添加到图标列表中吗？

谢谢！

- rschonhoff

---

请告诉我您是否解决了我问过的这个问题：如何在atilesitem中显示数字。链接为http://stackoverflow.com/questions/43111317/how-to-show-numbers-in-atilesitem。 - Yagami Light

Answer 1

Font awesome实际上已经内置支持将常规文本（即数字、字母等）叠加在图标上。

这是一个很好的日历图标示例，其中实际日期以纯文本形式显示。正如该帖子还解释的那样，您可能需要添加一些额外的样式以实现最佳位置。

HTML：

<span class="fa-stack fa-3x">
  <i class="fa fa-calendar-o fa-stack-2x"></i>
  <strong class="fa-stack-1x calendar-text">27</strong>
</span>

CSS：

.calendar-text { margin-top: .3em; }

- Lennart Stoop

Answer 2

下面的代码将生成一个带数字的圆形

<span class="fa-stack fa-3x">
  <i class="fa fa-circle-o fa-stack-2x"></i>
  <strong class="fa-stack-1x">1</strong>
</span>

以下代码将会生成一个带数字的实心圆

<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <strong class="fa-stack-1x text-primary">1</strong>
</span>

这里使用了Bootstrap中的text-primary类来设置数字的颜色。

- Sagar Ranglani

Answer 3

如果在 FA 的样式表中包含字母和数字，会使其变得太大而且不支持（https://github.com/FortAwesome/Font-Awesome/issues/5019）。所以我这样做：

.fa-alph {
font-family: Arial, sans-serif; /* your font family here! */
font-weight: bold;
color: #860000;
font-style: normal;   
}

那么

<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button>

这将留下一个漂亮干净的字体，您仍然可以使用愚蠢的 i (em) 来跟踪“图标”。此外，这使得所有图标类型字符都在同一元素范围内...(.fa-^)

我认为这个主题是关于带圆圈的图标。因此，您需要修改上面的CSS，将其变成一个 <span> 而不是一个 <button>，并在您的 span 中创建一个块元素。

.f-circle {
font-family: Arial; /* your font family here! */
font-weight: bold;
display: block;
border: 1px solid #860000;
border-radius: 999px;
padding: 6px 12px;
}

那么。

<span class="f-circle"><i class="fa-alph">2</i></span>

- tradesouthwest

Answer 4

你可以像这样做：

而不是这样：

<i class="fa fa-star" aria-hidden="true"> 1</i>
<i class="fa fa-star" aria-hidden="true"> 2</i> 
<i class="fa fa-star" aria-hidden="true"> 3</i> 
...

- Otobong Jerome

Answer 5

作为字体awesome和HTML/CSS的替代方案，找到你喜欢的示例并在Photoshop中创建类似的东西。导出PNG文件。大约需要10分钟。

- user3035649

Answer 6

我发现这在WordPress小部件中很好用（在标题中添加CDN样式表之后）：

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa-stack-1x fa-inverse">1</i>
</span>

- TheHackRepairGuy

Answer 7

很抱歉我不知道！实际上，Font awesome是一个仅用于呈现图标的字体。这里是可能的图标列表Fontawesome-icons。

你可以用很多其他方式来做到这一点，我会使用以下两种方法中的其中一种，具体取决于你要寻找的是什么。例如...

如果你想要一个简单的有数字的圆圈，我会用CSS去创建这个圆圈，并且在圆圈内使用普通文本。谷歌上有很多帖子和示例。这里有一个链接：how to create circles with css

如果您想用更多图形/图标来实现这个目的，我建议您看一下Fontello，这将根据您自己的SVG文件创建字体。因此，您可以使用图像作为背景制作自己的数字，并将数字呈现为图标，就像fontawesome一样。

祝好！

Pancho

- Pancho