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

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

icon- class 前缀变为 fa fa- :

icon-* -> fa fa-*

来源：https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4

Answer 2

您只需在 class="" 中使用 class fa 一次。我已经更新了您的代码中的几个位。

在 <i> 元素周围的 <span> 中定义主堆栈大小。 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。

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

Need help in stacking font-awesome icons

css

font-awesome