如何使用FontAwesome在图标上使用数字

当前, FontAwesome中没有类似fa-number-1, fa-number-2, fa-number-3等的类(带有图标), 可用于创建带有数字的图标。但为什么 ？好吧, 基本上是因为你不需要自定义字体即可仅显示数字, 因此请为其编写一些html和CSS。但是, 可以在FontAwesome的图标中包装一些数字, 这确实有用。

为了实现这一点, 我们将使用该方法与FontAwesome的fa-stack类一起使用。通常, 为了堆叠多个图标, 可以在父级上使用fa-stack类, 然后在图标上分配一些stack-xSize类以指定图标的大小, 并为较大的图标分配fa-stack-2x。例如, 可以使用以下标记来实现正方形内的twitter图标：

<span class="fa-stack fa-lg">
    <i class="fa fa-square-o fa-stack-2x"></i>
    <i class="fa fa-twitter fa-stack-1x"></i>
</span>

这将生成以下图标：

你可以使用相同的技巧在任何图标内设置一些自定义内容, 只要未填充父图标即可。

图标内的数字

如前所述, 你将需要使用fa-stack类创建一个容器范围。此节点将再包含2个项目, 其中另一个跨度为fa类, 图标类fa- <icon>和fa-stack- <size>类, 以及一个强元素(再次为fa-stack- <size>类)在强节点上, 你将使用纯文本设置所需的号码。图标内部的项目堆栈大小必须明显小于容器大小：

<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- The icon that will wrap the number -->
    <span class="fa fa-circle-o fa-stack-2x"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x">
        2    
    </strong>
</span>

先前的标记将生成以下图标：

与使用fa-sizex使用fa调整图标大小相同, 可以通过使用fa-stack-2x, fa-stack-3x, fa-stack-4x或fa-stack来更改堆栈元素的内容。 -5x类。另外, 你可以测试其他图标以产生出色的结果。例如, 以下标记：

<!-- Create an icon wrapped by the fa-stack class -->
<span class="fa-stack">
    <!-- The icon that will wrap the number -->
    <span class="fa fa-battery-empty fa-stack-2x"></span>
    <!-- a strong element with the custom content, in this case a number -->
    <strong class="fa-stack-1x" style="font-size:80%;">
        25%
    </strong>
</span>

将生成带有自定义内容的电池图标, 该图标显示电池的可用百分比：

你可以使用以下小提琴演奏, 其中包括最新版本的Font Awesome, 可以在线进行测试：

设计愉快！