Font Awesome 图标大小没有增加

Question

我在这个网站上安装了 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>

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

Answer 2

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

例如，

i {
    font-size: 18px;
}

Answer 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

Answer 4

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

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

Answer 5

使用以下内联 css

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

Answer 6

如果您在 Angular 5+ 中使用带有 Javascript 的 svg 使用 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
}

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

Answer 7

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

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

如果您应用了padding也要小心！