CSS: How to put text inside an icon?

Question

I am working on an Ionic application and I am showing info in rounded areas, but I need to put the number in the heart icon in the second area. I need them to be vertically and horizontally aligned, and that the number looks like inside the heart. I tried something, but I can not achieve everything right away. How can i do this? Thank.

NOTE : the text is dynamic, this is a percentage, which can be from 0% to 100%

This is the code for this area.

<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>

Run codeHide result

Answer 1

, relative :before peseudo

https://jsfiddle.net/Ljquqtrv/

Answer 2

-

<link href="http://code.ionicframework.com/1.3.0/css/ionic.min.css" rel="stylesheet"/>
<div class="post-info">
  <span class="charity">
      <span style="font-size: 13px;position:absolute;text-align:center;width:26px;padding-top:3px">55</span>
      <i style="font-size:30px" class="ion-ios-heart-outline"></i>
  </span>
</div>

Hide result

Answer 3

The text of the center based on the meaning, that is, a single digit, as well as two numbers. You can set the position above the icon using "position: absolute"; You can also use css / javascript / jquery to focus it on "top: XXpx; left: XXpx;" jsfiddle will follow soon.

Jsfiddle

.charity > .inner-num {
  position:absolute;  
  left:10px;
  top:10px;
  width:20px;
  text-align:center;
}

Answer 4

You cannot put text in an icon. Make the icon a background image of a div. Then put the numbers inside the div.