css - 在堆叠超赞字体图标方面需要帮助

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

但它在第 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 .