【问题标题】:Bigger Glyphicons更大的字形图标
【发布时间】:2013-08-30 23:07:49
【问题描述】:

如何在 twitter bootstrap 3.0(不是 2.3.x)中制作更大的 Glyphicons。

这段代码会让我的字形变大:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

我怎样才能不使用使用 btn-lg 类而只使用跨度?

这给出了一个小字形:

<span class="glyphicon glyphicon-link"></span>

【问题讨论】:

    标签: css twitter-bootstrap twitter-bootstrap-3 glyphicons


    【解决方案1】:

    您可以根据自己的喜好为 glyphicon 指定字体大小:

    span.glyphicon-link {
        font-size: 1.2em;
    }
    

    【讨论】:

    • 太棒了!就我而言,我有一个带按钮的 input-group-btn,而且这个按钮要大一些。所以我只为我的字形图标提供了“font-size:95%”,它就解决了。
    【解决方案2】:

    我是这样做的:

    <span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>
    

    这允许您即时更改大小。最适合更改大小的临时要求,而不是更改 css 并将其应用于所有人。

    【讨论】:

    • 一般来说内联样式不是好的方法。如果您需要某些组件的特定样式,只需通过它的父类应用新的字体大小
    • 有时是一次性的,但你不会被打扰
    【解决方案3】:

    .btn-lg 类在 Bootstrap 3 (link) 中具有以下 CSS:

    .btn-lg {
      padding: 10px 16px;
      font-size: 18px;
      line-height: 1.33;
      border-radius: 6px;
    }
    

    如果您将相同的font-sizeline-height 应用于您的跨度(.glyphicon-link 或新创建的.glyphicons-lg,如果您要在多个实例中使用此效果),您将获得与大按钮大小相同的 Glyphicon。

    【讨论】:

    • 添加btn-lg 类是更容易的选择。好答案!
    【解决方案4】:

    <button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
    </button>
    
    <!--fa-2x , fa-3x , fa-4x ... -->
    <button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
    </button>

    【讨论】:

      【解决方案5】:

      就我而言,我有一个input-group-btn 和一个button,而这个button 比它的容器大一点。所以我只给了我的字形图标font-size:95%,它就解决了。

      <div class="input-group">
          <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
          <div class="input-group-btn">
              <button class="btn btn-default" type="button">
                  <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
              </button>
          </div>  
      </div>
      

      【讨论】:

        【解决方案6】:

        &lt;h1&gt;&lt;h2&gt; 中写下您的&lt;span&gt;

        <h1> <span class="glyphicon glyphicon-th-list"></span></h1>
        

        【讨论】:

          【解决方案7】:

          如果您使用的是 bootstrap 3,请使用标签,例如 &lt;small&gt;&lt;span class="glyphicon glyphicon-send"&gt;&lt;/span&gt;&lt;/small&gt; 它非常适合 Bootstrap 3。
          您甚至可以使用多个&lt;small&gt; 标记将大小设置得更小。
          代码:
          &lt;small&gt;&lt;small&gt;&lt;span class="glyphicon glyphicon-send"&gt;&lt;/span&gt;&lt;/small&gt;&lt;/small&gt;

          【讨论】:

          • 这与问题完全相反...除非您覆盖样式,否则它会变小。前几天我只是将那个标签用于它的确切目的。
          猜你喜欢
          • 2013-12-21
          • 2023-04-03
          • 2019-10-09
          • 2017-12-14
          • 1970-01-01
          • 1970-01-01
          • 2017-12-15
          • 2018-06-07
          • 1970-01-01
          相关资源
          最近更新 更多