javascript - 如何为 "rewind"创建字形，其中的秒数具有动态值？

Question

问题:

我正在使用很棒的字体来创建倒带字形。我想像这样在其中添加一个数字:

我不想创建硬编码图像，因为我希望里面的数字是可配置的/动态的。

这是我到目前为止所做的(不多)。

代码:

<i class="fa fa-undo fa-5x"></i>
<i class="fa fa-history fa-5x"></i>

fiddle

https://jsfiddle.net/un9ds33r/

FWIW 我可以在我的应用程序中使用 jQuery。

Answer 1

一个可能的布局:

.icon {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.icon .number {
  position: absolute;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="icon"><i class="fa fa-undo fa-5x"></i><span class="number">5</span></span>