使用数字与字体真棒

Question

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

就像一个圆圈里面有一个1等等。这可能吗？将FA被添加号码的图标列表

感谢

Answer 1

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

你可以用很多其他方法做到这一点，我会用这两种方法之一来做，这取决于你的需求。例如...

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

如果你想实现这个更多的图形/图标我建议看看Fontello，这将创建一个字体出自己的svg文件。所以你可以做自己的数字与图像作为背景，并将数字作为图标呈现，就像fontawesome一样。

有一个好的！

潘乔

Answer 2

字体真棒实际上有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 3

下面的代码将给出一个圈与多家

<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（从引导）用于设置数量

Answer 4

的颜色要包含字母和数字将使样式表对于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>