Question

如何在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类，如何使用

这给出了一个小的glyphicon：

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

Answer 1

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

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

Answer 2

以下是我的表现方式：

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

这允许您动态更改大小。最适合改变大小的临时要求，而不是更改CSS并将其应用于所有。

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

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>

Answer 5

在我的情况下，我有一个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>我的glyphicon并且它已经解决了。

while (thisChar = getchar() != '\n') {
    n = n * 10 + thisChar - '0';
}

Answer 6

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

中

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

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>

更大的Glyphicons

7 个答案: