大Glyphicons

我如何使更大的Glyphicons在推特引导3.0(不是2.3 x)。

这段代码将使我的象形文字变大:

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

在使用只有一个span时，如何使用btn-lg类获得这个大小没有 ?

这给出了一个小象形文字:

<span class="glyphicon glyphicon-link"></span>
244637 次浏览
小开
最佳答案

你可以根据自己的喜好设置字体大小:

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

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

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

如果你将相同的font-size和line-height应用到你的span(如果你打算在多个实例中使用此效果，可以是.glyphicon-link或新创建的.glyphicons-lg)，你将得到一个与大按钮相同大小的Glyphicon。

小开

我是这样做的:

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

这允许你在飞行中改变大小。最适合临时需求来改变大小，而不是改变css并将其应用于所有。

小开

在我的例子中，我有一个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>
小开

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

小开

如果你正在使用引导3，使用标签，像这样<small><span class="glyphicon glyphicon-send"></span></small>它非常适合引导3 你甚至可以使用多个<small>标记来将大小设置得更小。< br > 代码:< br > <small><small><span class="glyphicon glyphicon-send"></span></small></small> < / p >

小开

将你的<span>写入<h1>或<h2>:

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

提交答案