字体真棒图标大小没有增加答案

【问题标题】：Font Awesome icon size not increasing字体真棒图标大小没有增加
【发布时间】：2017-07-09 13:50:36
【问题描述】：

我在this 网站上安装了 Font Awesome 图标。即使添加类以增加大小，图标大小也不会增加。

<ul class="stay-connected-inner list-inline">
  <li><a href="#"><i class="fa fa-twitter fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-medium fa-3" aria-hidden="true"></i></a></li>
  <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li>
</ul>

【问题讨论】：

什么是“增加大小的类”？发-3？ fa-3 未声明。
是的。 fa-3 是增加图标大小的类。
把fa-3改成fa-3x
不，fa-3 未声明。只需添加 .fa-3{font-size:20px}

标签： html css font-awesome

【解决方案1】：

要相对于其容器增加图标大小，请使用 fa-lg（增加 33%）、fa-2x、fa-3x、fa-4x 或 fa-5x 类。

            <ul class="stay-connected-inner list-inline">
              <li><a href="#"><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-medium fa-3x" aria-hidden="true"></i></a></li>
              <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li>
            </ul>

【讨论】：

【解决方案2】：

字体真棒图标是文本。所以使用 font-size 来增加 font-awesome 图标的大小。

例如，

i {
    font-size: 18px;
}

【讨论】：

【解决方案3】：

对于字体真棒图标大小，请查看此链接。 http://fontawesome.io/examples/

要相对于其容器增加图标大小，请使用 fa-lg（增加 33%）、fa-2x、fa-3x、fa-4x 或 fa-5x 类。

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

【讨论】：

【解决方案4】：

我遇到了同样的问题。出于某种原因，fa 类覆盖了很棒的字体库上的 fa-2x 类。我发现一个博客，他们早在 2014 年就知道这是一个问题，但尚未解决。在我的网站上，我再次添加了样式类并添加了 !important 解决了我的问题。

<style>
      .fa-2x{
        font-size:2em !important;
    };
</style>

【讨论】：

【解决方案5】：

使用以下内联 css

<style type="text/css">
    .fa-3{
      font-size: 30px;
    }
</style>

【讨论】：

【解决方案6】：

如果您在 Angular 5+ 中使用 svg 和 Javascript 使用 font awesome 或 font awesome pro 图标。增加自定义字体大小的简单方法是：

.svg-inline--fa{
  font-size:1.500em; //use your custom font size. If you do not want to apply the font awesome size classes
}

在您的自定义组件中应用它以立即查看更改。

【讨论】：

【解决方案7】：

在我的情况下，设置 fa fa-5x、font-size 或 height 没有帮助，但是：

 width: 20px !important; // 20px is an example value

如果你申请了padding，也要小心！

【讨论】：