Html 字体图标大小不增加

我有字体可怕的图标安装在网站上。即使添加类以增加大小，图标大小也不会增加

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

要增加相对于容器的图标大小，请使用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>

<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

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

例如

i {
    font-size: 18px;
}

---

使用以下内联css

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

.fa-3{
字体大小：30px；
}

有关字体大小的信息，请查看此链接。

---

要增加相对于其容器的图标大小，请使用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>

<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

falg
fa-2x
fa-3x
fa-4x
fa-5x

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

.fa-2x{
字体大小：2em！重要；
};

如果在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
}

---

在自定义组件中应用此选项以立即查看更改

在我的案例中，设置

fa-5x

，或

font size

或

height

没有帮助，但是：

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

---

如果应用了

填充

，也要小心

什么是“增加规模的班级”？fa-3？fa-3没有申报，是的。fa-3是增加图标大小的类。将

fa-3

更改为

fa-3x

Nop，不声明fa-3。只需添加.fa-3{font size:20px}