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

Question

我正在尝试将堆叠图标与 fontawesome 一起使用。我遵循了 Dave Gandy 的优秀博客 post 中的示例。 http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/

堆叠工作正常，但我试图将堆叠图标与非堆叠图标（fa-5x）对齐。我似乎无法使堆叠图标的 size/alignment 与非堆叠图标的 size/alignment 匹配。请参阅此代码笔：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; 
}

代码笔http://codepen.io/anon/pen/jEwBNd

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

Alignment and sizing of stacked icons using fontawesome not working

css

font-awesome