Question

我想使用数字列出流程中的步骤。我很好奇如何使用Font Awesome做到这一点。

我想在其中使用带有1,2,3 ......的圆圈。这可能吗？
Will Font Awesome会在图标列表中添加数字吗？

谢谢！

Answer 1

字体真棒实际上有built-in support用于在图标上堆叠常规文本（即数字，字母，..）。

这是一个nice example of a calendar icon，其中每月的实际日期为纯文本。正如帖子还解释的那样，您可能需要投入一些额外的样式以实现最佳定位。

<强> 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; }

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>

这里text-primary类（来自bootstrap）用于设置数字的颜色

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>

这留下了一个漂亮干净的字体，你仍然可以使用愚蠢的我（em）来保持“图标”的trakc。另外，这会将所有图标类型字符保留在同一元素范围内...（。fa - ^）

我相信这个帖子是一个带有圆圈的图标。因此，您可以修改上面的CSS，使其成为<span>而不是<button>，并在您的范围内创建一个块元素。

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

Answer 4

不是我知道的！实际上Font awesome是一种仅用于渲染图标的字体。以下是可能的图标列表Fontawesome-icons。

你可以用许多其他方式做到这一点，我会根据你的寻找方式使用其他两种方法中的一种。例如......

一个内部带有数字的简单圆圈，我将采用CSS的方式，创建一个圆圈并在里面使用普通文本。谷歌有很多帖子/例子。这是一个：how to create circles with css

如果你想用更多图形/图标来实现这一点我建议你看看Fontello，这会创建一个你自己的svg文件中的字体。因此，您可以使用图像作为背景来创建自己的数字，并将数字渲染为图标，就像fontawesome一样。

有一个好的！

潘乔

Answer 5

我发现这在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>

Answer 6

作为字体真棒和 HTML/CSS 的替代品，找到一个你喜欢的例子并在 Photoshop 中创建类似的东西。导出 PNG。大约需要 10 分钟。

使用数字与字体真棒

6 个答案: