【问题标题】: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-5xfont-sizeheight 没有帮助,但是:

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

              如果你申请了padding,也要小心!

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2013-08-29
                • 2018-05-07
                • 2023-03-08
                • 2016-03-21
                • 1970-01-01
                • 2015-08-22
                • 2015-11-06
                相关资源
                最近更新 更多