需要帮助堆积字体 - 真棒图标

Question

我最近将font-awesome版本从升级3.2.1到4.

我有这个工作 3.2.1

<li><span class="icon-stack stacked"><i class="icon-circle icon-stack-base"></i><i class="icon-phone icon-2x icon-light">
</i></span><span class="stacktext">Your Phone Number</span></li>

 .stacked
 {
  float: left;
  margin-right: 15px;
  color: #3ECCFC;
 }

.stacktext
{
  text-align:left;
  font-size: 14px;
  color: #444444;
}

但它并没有很好地堆积起来version 4.

<li><span class="fa fa-stack stacked"><i class="fa fa-circle fa fa-stack-base"></i><i class="fa fa-phone icon-2x fa fa-light">
        </i></span><span class="stacktext">Your Phone Number</span></li>

Answer 1

你只需要在fa一次中使用该类class="".我在代码中更新了几位.

定义元素<span>周围的主堆栈大小<i>.stacked在Font Awesome 4中已经过时了,因为它也fa-stack定义了一个堆栈.也fa-light改为fa-inverse.最后fa-stack-1x,fa-stack-2x用于缩放堆栈中的图标.fa-stack-2x将用于使图标与堆栈中的其他图标相比更大.

一切都放在一起导致:

<li>
   <span class="fa-stack fa-2x">
      <i class="fa fa-circle fa-stack-2x"></i>
      <i class="fa fa-phone fa-stack-1x fa-inverse"></i>
   </span>
   <span class="stacktext">Your Phone Number</span>
</li>

请检查Font Awesome网站上给出的堆栈示例:Stacks.