fa-icon内のテキスト

Question

faアイコンを使用してアイコン内にテキストを追加するにはどうすればよいですか？アイコン内の番号1を追加する方法

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

？

Answer 1

例

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

私はhttp://jsfiddle.net/canuk/YzkWs/も参考になると思います。