Make numbers be seen as icons by browser - html

Question

So I've got a little "intro" box that I styled effects for using fontawesome icons. The effect is nice and I would like to keep it, however later down the page I have a "stats" box and I want to use the same style & effect but using normal numbers so that the number can dynamically change via a php script. Of course, whenever I use normal numbers the effect doesn't work because I styled the CSS to work with the fontawesome icons. Is there a way to make the text parse as an icon, or do I need to rewrite my css?
HTML
<!-- Statistics -->
<div class="row">
<div class="span12 centre">
<h2 class="b-title">Some Statistics</h2><br /><br />
<!--Section 1-->
<div class="stats-box stats-box1">
<div class="text-center block-box">
<div class="stats-effect-inner"> <a class="stats-effect icon-unlock icon-3x" href="#"></a> </div>
<h3 style="text-decoration: none;">Domains</h3>
<p>The number of free domains given.</p>
<br />
</div>
</div>
</div>
Relative CSS is here. Full styling CSS is in the fiddle.
/*------------ Hover Effect Stats ------- */
.stats-effect { display: inline-block; font-size: 0px; cursor: pointer; margin: 15px 30px; width: 90px; height: 90px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; text-align: center; position: relative; z-index: 1; color: #fff; }
.stats-effect:after { pointer-events: none; position: absolute; width: 100%; height: 100%; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.stats-effect:before { speak: none; font-size: 48px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; }
/* Effect 1 */
.stats-effect-inner .stats-effect { background: rgba(255, 255, 255, 0.1); -webkit-transition: background 0.2s, color 0.2s; -moz-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; }
.stats-effect-inner .stats-effect:after { top: -7px; left: -7px; padding: 7px; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -webkit-transform: scale(.8); -moz-transition: -moz-transform 0.2s, opacity 0.2s; -moz-transform: scale(.8); -ms-transform: scale(.8); transition: transform 0.2s, opacity 0.2s; transform: scale(.8); opacity: 0; -moz-box-shadow: 0 0 0 4px #ffffff;/*FF 3.5+*/ -webkit-box-shadow: 0 0 0 4px #ffffff;/*Saf3-4, Chrome, iOS 4.0.2-4.2, Android 2.3+*/ -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color=#ffffff)";/*IE 8*/ box-shadow: 0 0 0 4px #ffffff; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=90, Color=#ffffff);/*IE 5.5-7*/
}
/* Effect */
.stats-box1:hover .stats-effect-inner .stats-effect, .stats-box2:hover .stats-effect-inner .stats-effect, .stats-box3:hover .stats-effect-inner .stats-effect { background: rgba(255, 255, 255, 1); color: #27CCC0; }
.stats-box1:hover .stats-effect-inner .stats-effect:after, .stats-box2:hover .stats-effect-inner .stats-effect:after, .stats-box3:hover .stats-effect-inner .stats-effect:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; }
/*------------ Icon Hover Effect ------- */
.stats-effect1 > img { padding: 20px; }
.stats-effect-inner1 { position: absolute; right: -33px; top: -33px; }
.stats-effect1 { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; color: #FF6850; cursor: pointer; display: inline-block; font-size: 0; height: 70px; margin: 12px 21px 15px 11px; position: relative; text-align: center; width: 70px; z-index: 1; }
.stats-effect1:after { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: ""; height: 100%; pointer-events: none; position: absolute; width: 100%; }
.stats-effect1:before { background: none repeat scroll 0 0 #FAFAFA; border-radius: 50% 50% 50% 50%; display: block; font-size: 48px; font-style: normal; font-variant: normal; font-weight: normal; line-height: 90px; text-transform: none; }
.stats-effect-inner1 .stats-effect { background: none repeat scroll 0 0 rgba(13, 30, 219, 0.1); transition: background 0.2s ease 0s, color 0.2s ease 0s; }
TL;DR - I want the icon within the circle in the box to be a normal text number but have the same effect when moused over.
Thanks so much for your help!
EDIT: UPDATED FIDDLE: Fiddle
EDIT: Minimized CSS: Fiddle