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。

Answer 2

icon-类前缀变为fa fa-：

icon- * - ＆gt; fa fa - *

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

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

2 个答案: