web-dev-qa-db-ja.com

Bootstrap 2.3のグリフィコンのサイズを大きくします

グリフィコンのサイズを増やす簡単な方法はありますか？
Font Awesome のような解決策を見つけましたが、サイズ2のアイコンを増やすためだけに新しいCSSライブラリを含めたくありません。

javascriptjquerycsstwitter-bootstrap
38
Himanshu Yadav

これはBootstrap 2.3でアイコンのサイズを大きくする1つの方法です。私のコメントでメモしたように、スプライトシートイメージをスケーリングしているため、結果はかなり悪くなります。

JSFiddleデモ

.test {
    background-image: url("http://Twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
    width: 90px;
    height: 90px;
    background-size: 2100px 800px;
}

代わりに Fontello を検討してください。これらを使用すると、選択したアイコンに基づいてカスタムフォントを生成できます。

10
Rajender Joshi

<span>タグのフォントサイズの設定は私のために働いた

<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>
71
user2686734

Bootstrap 3の時点で、グリフィコンはスプライトではなくフォントに変更されました。これにより、柔軟性が向上します。たとえば、font-sizeそして次に進みます。

<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>

または、単に修飾子クラスを書くことができます：

.glyphicon-2x {
    font-size: 48px;
}
32
Umur Kontacı

フォントサイズを設定するだけです:)これを行うには複数のオプションがあります：

First（要素にまっすぐに設定）

<span class="glyphicon glyphicon-search" style="font-size:30px"></span>

Second（cssファイルに設定）

.glyphicon{
    font-size: 30px; 
}

Third（modify-classesを構築）[この可能性を好む]

.glyphicon-2x{
    font-size: 40px; 
}
.glyphicon-3x{
    font-size: 60px; 
}
...

使用法：

<span class="glyphicon glyphicon-2x glyphicon-search"></span>

3番目のものをさらに小さくするためのオプションがさらにあります。そこについては、Lessの詳細をお読みください。

あなたの質問とブランドンが私に与えたコメントによると、他のアイコンcontianerで上記を使用できます。

ブートストラップ2.3

最初

<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>

秒

.icon-search{
    -webkit-transform:scale(1.8);
    -moz-transform:scale(1.8);
    -o-transform:scale(1.8);
}

第三

.icon-x2{
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -o-transform:scale(2.0);
}
.icon-x3{
    -webkit-transform:scale(3.0);
    -moz-transform:scale(3.0);
    -o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>
17
Dwza

次を使用できます。

.icon-whatever {
    zoom: 2;
    -moz-transform: scale(2);  /* Firefox */
}

ただし、画像を拡大するため、サイズが大きくなるとぼやけて見えます。フォントアイコンライブラリの方がはるかに優れています。

4
dave

ボタンにグリフィコンを使用する場合、それは非常に簡単です。

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

Btn-lgはサイズを定義します。 btn-lg、bnt-sm、btn-sxを使用できます

編集：ボタンを使用しない場合、またはlgが十分に大きくない場合は、独自のクラスを追加してfont-sizeを使用できます（bootstrap 3.0でのみテスト）。Inbootstrap 3.0グリフィコンは.svgとして存在するため、見苦しくない

例：

<button type="button" class="btn btn-default btn-lg myGlyphicon">
  <span class="glyphicon glyphicon-star"></span>
</button>

CSS：

.myGlyphicon {font-size: 120%;}

または

.myGlyphicon {font-size: 70px;}
2
kinske

たとえば、ブートストラップのクラスをオーバーライドできます。

// Size and position are not working.
.icon-glass {
  background-size: 800px;
  backgroung-position: 10px 50px;
  width: 24px;
  height: 24px;
}

問題は、解像度のためにアイコンがiconsいように見えることです。

お役に立てれば！

2
cortex

IcoMoon.io を使用できます。さまざまな色、サイズ、さらには選択からスプライトを生成します。

2
itsbalamurali

「変換」を使用する非常に簡単な方法を見つけました。たとえば、配置：

.glyphicon-chevron-right {transform:scale(2.9,2.9);}

cSSで2.9倍に増やします。

1
Gabriel

Bootstrap 3を使用している場合、アイコンにem幅を使用しないのはなぜですか？アイコンが見出し/段落/本文などに埋め込まれている場合、 emsのフォントサイズは、アイコンが含まれる段落に関連してアイコンのサイズを大きくします。

たとえば、次の場合：

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

ブートストラップをカスタマイズするcssで、次を追加します。

.glyphicon {font-size: 1.25 em;}

これにより、グリフが拡大縮小されます。

1
David Peters

クラスleadを含めてみてください

<span class="glyphicon glyphicon-home lead"></span>

enter image description here

または、<h4>タグ内にラップします

0
Sasi Varunan