更大的Glyphicons

212

如何在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>

如何仅使用span 而不使用btn-lg类来获得此大小？

这会产生一个小的字形：

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

— 吉奥米
source

372

您可以根据自己的喜好给glyphicon一个字体大小：

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

大！就我而言，我有一个带有按钮的input-group-btn，并且这个按钮更大一点。因此，我为我的glyphicon提供了“ font-size：95％”，它就解决了。

— victorf '16

41

这是我的方法：

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

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

— 兰迪·格林康
source

2

通常，内联样式不是一个好的方法。如果您需要某些组件的特定样式，只需通过其父类应用新的字体大小

— Kaloyan Stamatov，2016年

有时它是一个关闭，尽管您也不会打扰

— Matthew Lock

29

该.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大小为一体的大型按钮相同。

— 安琪莉可
source

4

添加btn-lg类是容易得多的选择。好答案！

— 尼尔

6

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

2

在我的情况下，我有一个input-group-btn带有的button，button它比其容器大一点。所以我只给font-size:95%了我的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>

— 维克多夫
source

2

写您的<h1>或<h2>：

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

— 安静
source

0

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


— 瓦伦克
source

这与问题完全相反...除非您覆盖样式，否则它将使其变小。前几天，我只是出于特定目的使用了该标签。

— 理查德·巴克