より大きなグリフィコン

212

Twitterブートストラップ3.0（2.3.xではない）でより大きなグリフィコンを作成するにはどうすればよいですか。

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

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

スパンのみを使用しているときにbtn-lgクラスを使用せずにこのサイズを取得するにはどうすればよいですか？

これは小さなグリフィコンを与えます：

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

— guiomie
ソース

372

あなたはグリフィコンにあなたの好みに合わせてフォントサイズを与えることができます：

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

すごい！私の場合、ボタン付きのinput-group-btnがあり、このボタンは少し大きかった。したがって、グリフィコンに「font-size：95％」を指定しただけで解決しました。

— victorf 2016年

41

ここに私がそれをする方法があります：

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

これにより、その場でサイズを変更できます。CSSを変更してすべてに適用するのではなく、その場限りの要件でサイズを変更する場合に最適です。

— ランディ・グリーンコーン
ソース

2

一般に、インラインスタイルは適切なアプローチではありません。一部のコンポーネントに特定のスタイルが必要な場合は、その親クラスを介して新しいフォントサイズを適用します

— Kaloyan Stamatov

時々、それは1回限りのものであり、あなたは気にすることができない

— 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が得られます。

— アンジェリーク
ソース

4

btn-lgクラスを追加する方がはるかに簡単です。いい答えだ！

— Neel

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ı
ソース

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>

— 勝利者
ソース

2

あなたの書き込みでの<h1>か<h2>：

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

— 静か
ソース

0

ブートストラップ3を使用している場合は、次のようにタグを使用します。これは、ブートストラップ3に最適です。
複数のタグを使用して、サイズをさらに小さく設定することもできます。
コード：


— ヴァリンク
ソース

これは問題の正反対です...スタイルをオーバーライドしない限り、これは小さくなります。先日、そのタグを正確な目的で使用しました。

— Richard Barker