Html 使用数字与字体真棒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25534068/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Numbers With Font Awesome
提问by rschonhoff
I want to use numbers to list steps in a process. I was curious about how to do this with Font Awesome.
我想使用数字来列出流程中的步骤。我很好奇如何使用 Font Awesome 做到这一点。
I'd like to use circles with a 1, 2, 3... in it. Is this possible?
Will Font Awesome be adding numbers to the list of icons?
我想使用带有 1, 2, 3 ... 的圆圈。这可能吗？
Font Awesome 会在图标列表中添加数字吗？
Thanks!
谢谢！
回答by Lennart Stoop
Font awesome actually has built-in supportfor stacking regular text (i.e. numbers, letters, ..) on top of icons.
Font Awesome 实际上内置了对在图标顶部堆叠常规文本（即数字、字母等）的支持。
Here is a nice example of a calendar iconwith the actual day of the month as plain text. As the post also explains you might need to throw in some extra styling for optimal positioning.
这是一个很好的日历图标示例，其中以纯文本形式显示月份中的实际日期。正如帖子还解释的那样，您可能需要添加一些额外的样式以获得最佳定位。
HTML:
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:
CSS：
.calendar-text { margin-top: .3em; }
回答by Sagar Ranglani
Following code will give a circle with a number
以下代码将给出一个带有数字的圆圈
<span class="fa-stack fa-3x">
<i class="fa fa-circle-o fa-stack-2x"></i>
<strong class="fa-stack-1x">1</strong>
</span>
Following code will give a solid circle with a number
以下代码将给出一个带有数字的实心圆圈
<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>
Here the text-primaryclass (from bootstrap) is used to set the colour of the number
这里的text-primary类（来自引导程序）用于设置数字的颜色
回答by tradesouthwest
To include letters and numbers would make the style sheet for FA way too large and they do not support it ( https://github.com/FortAwesome/Font-Awesome/issues/5019). so what i do is like such:
包含字母和数字会使 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;
}
then
然后
<button class="btn btn-default" type="button"><i class="fa-alph">2</i></button>
this leaves a nice clean font and you can still use the silly i ( em) to keep trakc of "icons." Plus this keeps all icon type characters within the same elemental scope... (.fa-^)
这留下了一个漂亮干净的字体，你仍然可以使用愚蠢的 i ( em) 来保持“图标”的 trakc。此外，这将所有图标类型字符保持在相同的元素范围内......（.fa-^）
I believe this thread was for an icon with a circle around it. So you would modify this CSS above to make it a <span>instead of a <button>and creat a block element in your span.
我相信这个线程是为了一个带有圆圈的图标。因此，您可以修改上面的 CSS 以使其成为 a<span>而不是 a<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;
}
then
然后
<span class="f-circle"><i class="fa-alph">2</i></span>
回答by Jerome Blacq
You can just do something like this instead :
你可以这样做：
<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>
...
回答by TheHackRepairGuy
I find this works nicely within WordPress widgets (after adding in the CDN styesheet to the header):
我发现这在 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>
回答by Pancho
Not that I know off! Actually Font awesome is a font used to render icons only. Here is a list of possible icons Fontawesome-icons.
不是我知道的！实际上 Font Awesome 是一种仅用于渲染图标的字体。这是一个可能的图标列表Fontawesome-icons。
You could do this in many other ways i would do it using one of this 2 other methods depending on what your looking for. For example...
您可以通过许多其他方式来做到这一点，我会根据您的需求使用这两种其他方法之一来做到这一点。例如...
A simple circle with a number inside, the way I would go would be with CSS, creating a circle and using normal text inside. There are tons of posts/examples in google for that. Here is one : how to create circles with css
一个简单的圆圈里面有一个数字，我会使用CSS，创建一个圆圈并在里面使用普通文本。谷歌中有大量的帖子/例子。这是一个：如何使用 css 创建圆圈
If you want to achive this with something more graphic/icon I suggest taking a look at Fontello, this creates a font out of your own svg files. So you could do your own numbers with images as background and render the numbers as icons just like fontawesome does.
如果你想用更多的图形/图标来实现这一点，我建议看看Fontello，它会从你自己的 svg 文件中创建一个字体。因此，您可以使用图像作为背景制作自己的数字，并将数字呈现为图标，就像 fontawesome 所做的那样。
Have a good one!
祝你有个好的一天！
Pancho
潘乔
