更大的字形图标答案

【问题标题】：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-size 和line-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】：

在<h1> 或<h2> 中写下您的：

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

【讨论】：

【解决方案7】：

如果您使用的是 bootstrap 3，请使用标签，例如  它非常适合 Bootstrap 3。
您甚至可以使用多个 标记将大小设置得更小。
代码：


【讨论】：

这与问题完全相反...除非您覆盖样式，否则它会变小。前几天我只是将那个标签用于它的确切目的。