锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识css图标

当前, 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>

这将生成以下图标：
如何使用FontAwesome在图标上使用数字

文章图片
你可以使用相同的技巧在任何图标内设置一些自定义内容, 只要未填充父图标即可。
图标内的数字 如前所述, 你将需要使用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>

先前的标记将生成以下图标：
如何使用FontAwesome在图标上使用数字

文章图片
与使用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>

将生成带有自定义内容的电池图标, 该图标显示电池的可用百分比：
如何使用FontAwesome在图标上使用数字

文章图片
你可以使用以下小提琴演奏, 其中包括最新版本的Font Awesome, 可以在线进行测试：
【如何使用FontAwesome在图标上使用数字】设计愉快！

    推荐阅读


    上一篇：如何在Laravel中使用TCPDF从HTML生成PDF

    下一篇：如何在Windows中设置第一个Django项目并打个招呼