更大的Glyphicons

Question

如何在twitter bootstrap 3.0(而非2.3.x)中制作更大的Glyphicons.

这段代码会让我的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班在引导3(以下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>