CSS：如何在图标内放置文字？

Question

我正在开发Ionic应用程序，并且在四舍五入的区域显示了一些信息，但是我需要将数字放入第二个区域的“心脏”图标中。我需要它们在垂直和水平方向上对齐，并且数字看起来像是在心脏内部。我一直在尝试一些事情，但无法一次完成所有工作。我怎样才能做到这一点？谢谢。

注意：文字是动态的，它是一个百分比，可以是0％到100％

这是该区域的代码

<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet"/>
<div class="post-info">
  <span class="charity">
    <i class="ion-ios-heart-outline"></i><span style="font-size: 13px">45</span>
  </span>
</div>

Answer 1

您不能将文本放入图标中。使图标成为 div 的背景图像。然后将数字放入 div 内。