Come posso sovrapporre un numero sopra un glifo FontAwesome?

Question

Come posso sovrapporre un numero compreso tra 0 e 99 nel mezzo di 'icon-star-empty'?

Answer 1

È CSS dovrebbe essere simile:

.contain-i-e-s,.icon-empty-star,.text-i-e-s{ 
    height:100px; width:100px; 
} 
.contain-i-e-s{ 
    position:relative; 
} 
.text-i-e-s{ 
    text-align:center; position:absolute; 
} 

tuo HTML potrebbe essere simile:

<div class='contain-i-e-s'> 
    <i class='icon-empty-star'></i> 
    <div class='text-i-e-s'>99</div> 
</div> 

Answer 2

semplicemente fare questo dal Font Awesome docs on Stacked Icons:

<span class="fa-stack fa-lg"> 
    <i class="fa fa-star-o fa-stack-2x"></i> 
    <i class="fa fa-stack-1x">1</i> 
</span> 

Answer 3

Questo può anche essere fatto utilizzando Font Awesome Layers utilizzando la versione 5,0

<div class="fa-4x"> 
    <span class="fa-layers fa-fw" style="background:MistyRose"> 
    <i class="fas fa-circle" style="color:Tomato"></i> 
    <i class="fa-inverse fas fa-times" data-fa-transform="shrink-6"></i> 
    </span> 

    <span class="fa-layers fa-fw" style="background:MistyRose"> 
    <i class="fas fa-bookmark"></i> 
    <i class="fa-inverse fas fa-heart" data-fa-transform="shrink-10 up-2" style="color:Tomato"></i> 
    </span> 

    <span class="fa-layers fa-fw" style="background:MistyRose"> 
    <i class="fas fa-play" data-fa-transform="rotate--90 grow-2"></i> 
    <i class="fas fa-sun fa-inverse" data-fa-transform="shrink-10 up-2"></i> 
    <i class="fas fa-moon fa-inverse" data-fa-transform="shrink-11 down-4.2 left-4"></i> 
    <i class="fas fa-star fa-inverse" data-fa-transform="shrink-11 down-4.2 right-4"></i> 
    </span> 

    <span class="fa-layers fa-fw" style="background:MistyRose"> 
    <i class="fas fa-calendar"></i> 
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-8 down-3" style="font-weight:900">27</span> 
    </span> 

    <span class="fa-layers fa-fw" style="background:MistyRose"> 
    <i class="fas fa-certificate"></i> 
    <span class="fa-layers-text fa-inverse" data-fa-transform="shrink-11.5 rotate--30" style="font-weight:900">NEW</span> 
    </span> 

    <span class="fa-layers fa-fw" style="background:MistyRose"> 
    <i class="fas fa-envelope"></i> 
    <span class="fa-layers-counter" style="background:Tomato">1,419</span> 
    </span> 
</div>