web-dev-qa-db-ja.com

大きいグリフィコン

Twitterのブートストラップ3.0（2.3.xではなく）で、より大きなGlyphiconsを作成するにはどうすればよいですか。

このコードは私のグリフィコンを大きくするでしょう：

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

only _ spanを使用しながらbtn-lgクラスを使用してこのサイズwithoutを取得するにはどうすればよいですか。

これは小さなグリフアイコンを与える：

<span class="glyphicon glyphicon-link"></span>
csstwitter-bootstraptwitter-bootstrap-3glyphicons
210
guiomie

あなたはグリフアイコンにあなたの好みに合ったフォントサイズを与えることができます。

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

これが私のやり方です。

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

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

40
Randy Greencorn

Bootstrap 3の.btn-lgクラスには、次のCSSがあります（ link ）。

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

あなたのスパンに同じfont-sizeとline-heightを適用すると（この効果を複数のインスタンスで使用する場合は.glyphicon-linkまたは新しく作成した.glyphicons-lgのいずれか）、大きなボタンと同じサイズのGlyphiconが得られます。

29
Angelique
<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>
6
barış çıracı

<span>を<h1>または<h2>に書きます。

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

私の場合、私はbuttonを持つinput-group-btnを持っていました、そしてこの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
victorf

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

0
Valynk