css - 更大的字形图标

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 类而只使用 span 的情况下获得这个大小？

这给出了一个小字形图标：

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

score 372 · Accepted Answer

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

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

score 41 · Accepted Answer

这是我的做法：

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

这使您可以即时更改大小。最适合更改大小的临时要求，而不是更改 css 并将其应用于所有人。

score 29 · Accepted Answer

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

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

如果您将相同的font-size和应用line-height到您的跨度（或者如果您要在多个实例中使用此效果，则为.glyphicon-link新创建的），您将获得与大按钮相同大小的 Glyphicon。.glyphicons-lg

score 6 · Accepted Answer

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

score 2 · Accepted Answer

就我而言，我有一个input-group-btnwith a 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>

score 2 · Accepted Answer

2

写下你的<h1>或<h2>：

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

于 2016-06-11T09:27:49.003 回答

score 0 · Accepted Answer

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


css - 更大的字形图标

7 回答 7

Related

Reference