更大的Glyphicons

Question

如何在 Twitter Bootstrap 3.0 中使 Glyphicons 变大（而不是2.3.x）。

以下代码将使我的 Glyphicons 变大：

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

在仅使用 span 的情况下，如何获得此大小的样式，而不使用 btn-lg 类？

这会产生一个小的 glyphicon：

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

- guiomie

Answer 1

您可以根据自己的喜好为glyphicon设置字体大小：

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

- user2718994

---

太好了！在我的情况下，我有一个带有按钮的input-group-btn，这个按钮稍微大一点。所以我只是给我的glyphicon加上了“font-size:95%”，问题就解决了。 - victorf

Answer 2

这是我如何做到的：

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

这允许您随时更改大小。最适合临时需求更改大小，而不是更改CSS并将其应用于所有内容。

- Randy Greencorn

---

一般来说，内联样式不是一个好的方法。如果您需要为某个组件设置特定的样式，请通过其父类应用新的字体大小。 - Kaloyan Stamatov

有时候这只是一次性的事情，你可能不想费心去做。 - Matthew Lock

Answer 3

.btn-lg类在Bootstrap 3中具有以下CSS（链接）：

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

如果你对 .glyphicon-link 或者新建的 .glyphicons-lg 元素应用相同的 font-size 和 line-height，那么你会得到与大按钮相同大小的 Glyphicon 图标。

- Angelique

---

加上btn-lg类是更简单的选择。很好的答案！ - Neel

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

- barış çıracı

Answer 5

在我的情况下，我有一个带有按钮的，而这个比其容器稍微大一些。所以我只需要为我的glyphicon设置，问题就解决了。

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

- victorf

Answer 6

将您的 <span> 写在 <h1> 或 <h2> 中：

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

- quiet

Answer 7

如果您正在使用Bootstrap 3，请使用标签，像这样<small><span class="glyphicon glyphicon-send"></span></small>它非常适用于Bootstrap 3。
您甚至可以使用多个<small>标签来设置更小的大小。
代码：
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

- Valynk

---

这正好与问题相反...除非您覆盖样式，否则它会变小。我只是前几天为了其确切目的而使用了那个标签。 - Richard Barker