Text innerhalb der Fa-Ikone

Question

Wie füge ich einen Text innerhalb des Symbols mit dem fa-Symbol hinzu?

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
 
<i class="fa fa-circle-o" aria-hidden="true">1</i>

Wie die Nummer 1 in dem Symbol hinzufügen?

Answer 1

Beispiel

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
 

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

Answer 2

body { 
 
    padding: 20px; 
 
} 
 
.calendar-stack { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: (13em/14); 
 
    height: 1em; 
 

 
    .icon-calendar-empty, 
 
    .calendar-day { 
 
     position: absolute; 
 
    } 
 

 
    .calendar-day { 
 
     top: (7em/8); 
 
     left: (1em/8); 
 
     width: (11em/8); 
 
     height: (6em/8); 
 
     font-family: sans-serif; 
 
     font-size: (8em/14); 
 
     font-weight: 700; 
 
     line-height: (8em/14); 
 
     text-align: center; 
 
    } 
 
}

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 
 

 
<div class="calendar-stack"> 
 
    <i class="icon-calendar-empty"></i> 
 
    <span class="calendar-day">1</span> 
 
</div> 
 
<div class="calendar-stack icon-2x"> 
 
    <i class="icon-calendar-empty"></i> 
 
    <span class="calendar-day">22</span> 
 
</div> 
 
<div class="calendar-stack icon-3x"> 
 
    <i class="icon-calendar-empty"></i> 
 
    <span class="calendar-day">31</span> 
 
</div> 
 
<div class="calendar-stack icon-4x"> 
 
    <i class="icon-calendar-empty"></i> 
 
    <span class="calendar-day">25</span> 
 
</div> 
 
<div class="calendar-stack icon-5x"> 
 
    <i class="icon-calendar-empty"></i> 
 
    <span class="calendar-day">3</span> 
 
</div>

Ich denke http://jsfiddle.net/canuk/YzkWs/ auch hilfreich sein wird.