Выравнивание и калибровка сложенных значков с использованием fontawesome не работает

Question

Я пытаюсь использовать штабелированные значки с fontawesome. Я следовал примеру в отличном блоге Dave Gandy. http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/

Stacking прекрасно работает, но я пытаюсь выровнять сокетную иконку с не уложенной в нее иконкой (которая является fa-5x). Кажется, что размер/выравнивание совпадающего значка не соответствует размеру/выравниванию нестационарного значка. Смотрите эту codepen: http://codepen.io/rfiol/pen/YPQNaG

<i class="fa fa-calendar-o fa-5x"></i> 

<span class="fa-stack fa-3x"> 
    <i class="fa fa-calendar-o fa-stack-2x"></i> 
    <strong class="fa-stack-1x calendar-text">27</strong> 
</span> 

Answer 1

Попробуйте этот

CSS

.calendar-text { 
    margin-top: .3em; 
} 
.calendar-text { 
    font-size:100%; 
} 
.col-md-1:nth-child(3) .calendar-text-half { 
    font-size:50%; 
} 
.col-md-1:nth-child(3) .fa-stack { 
    transform: scale(2,2); 
} 
.fa-stack { 
    font-size:2.5em; 
} 
.row { 
    width:100%; 
    height:100px; 
    display:block; 
} 

codepen http://codepen.io/anon/pen/jEwBNd