使用数字与字体真棒

Question

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

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

谢谢!

Answer 1

字体真棒实际上内置支持在图标上堆叠常规文本(即数字,字母,..).

以下是日历图标的一个很好的示例,其中每月的实际日期为纯文本.正如帖子还解释的那样,您可能需要投入一些额外的样式以实现最佳定位.

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

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

您可以通过许多其他方式来完成此操作，我将根据您的需求使用这两种其他方法之一来完成此操作。例如...

一个简单的圆圈，里面有一个数字，我的方法是使用 CSS，创建一个圆圈并在里面使用普通文本。谷歌中有大量的帖子/例子。这是一个：如何使用 css 创建圆圈

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

祝你有个好的一天！

潘乔