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

- user379888

---

什么是“增加大小的类”？fa-3？fa-3未声明。 - Roy Bogado

是的。fa-3是用于增加图标大小的类。 - user379888

将“fa-3”更改为“fa-3x”。 - Prasath V

不好意思，fa-3没有声明。只需添加.fa-3{font-size:20px}即可。 - Roy Bogado

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>

- Arun

Answer 2

Font Awesome图标是文本。因此，使用字号来增加Font Awesome图标的大小。

例如：

i {
    font-size: 18px;
}

- Omprakash Arumugam

---

最简单的答案。谢谢。 - Halo

Answer 3

我也遇到了同样的问题。在awesome字体库中，fa类别不知何故覆盖了fa-2x类别。我发现一个博客，他们在2014年就知道这是个问题，但至今没有解决。在我的网站上，我重新添加了style类别，并添加了!important，这解决了我的问题。

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

- Gene Potter

Answer 4

关于Font Awesome图标的大小，请查看此链接。 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

- Jenti Dabhi

Answer 5

使用以下内联 CSS

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

- Ravi Roshan

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
}

将此应用于您的自定义组件中，以立即查看更改。

- Ragavan Rajan

Answer 7

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

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

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

- Legends