Question

我正在尝试使用带有fontawesome的堆叠图标。我在Dave Gandy出色的博文中跟随了这个例子。 http://blog.fontawesome.io/2014/05/19/stacking-text-and-icons/

堆叠工作正常，但我尝试将堆叠图标与非堆叠图标（即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

堆叠图标的对齐和大小使用字体真棒不工作

1 个答案: