Css 使用字体对齐和调整堆叠图标的大小不起作用

我正在尝试使用堆叠的图标与真棒。我仿效了戴夫·甘迪优秀博客文章中的例子。

堆叠工作正常，但我正在尝试将堆叠图标与非堆叠图标（即fa-5x）对齐。我似乎无法使堆叠图标的大小/对齐方式与非堆叠图标的大小/对齐方式匹配。 请参阅此代码笔：

27

试试这个

CSS

代码笔

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

.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; 
}