Question

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

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

使用以下内联css

# 1 "prova.c"
# 1 "<built-in>"
# 1 "<command-line>"
# 1 "/usr/include/stdc-predef.h" 1 3 4
# 1 "<command-line>" 2
# 1 "prova.c"
int main(int argc, char* argv[]) {
  int a=1;
  int b=2;
  return a+b;
}

Answer 4

对于字体真棒图标大小调整，请检查此链接。 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 5

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

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

Answer 6

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

.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，也要小心！

Font Awesome图标大小没有增加

7 个答案: