需要帮助堆叠font-awesome图标

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

但在第四版中，情况并不好。

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

- user2281858

---

你能展示一下你在 Font Awesome 4 中所做的代码吗？ - Hkidd

更新了问题。 - user2281858

Answer 1

你只需要在 class="" 中使用一次 fa 类。我已经更新了你代码中的几个部分。

在 <i> 元素周围的 <span> 中定义主堆栈大小。在 Font Awesome 4 中，stacked 已经过时，因为 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。

- Hkidd

---

你要如何调整大小啊？ - shinzou

Answer 2

icon-类前缀变成了fa fa-：

icon-* -> fa fa-*

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

- Bluety