212

Twitter ブートストラップ 3.0 (2.3.x ではない) でより大きな Glyphicon を作成するにはどうすればよいですか。

このコードは私のグリフィコンを大きくします:

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

7 に答える 7

372

グリフィコンに好みのフォントサイズを与えることができます:

span.glyphicon-link {
    font-size: 1.2em;
}
于 2013-08-28T02:28:14.147 に答える
29

この.btn-lgクラスには、Bootstrap 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 が得られます。

于 2013-08-28T02:32:24.600 に答える
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>

于 2016-02-11T08:49:13.843 に答える
2

私の場合、 と があり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>
于 2016-01-22T17:27:46.893 に答える