38

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

4

11 に答える 11

32

Bootstrap 3 以降、グリフィコンはスプライトではなくフォントに変更されました。これにより、柔軟性が向上します。たとえば、 を設定して次にfont-size進むことができます。

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

または、単純にモディファイア クラスを記述できます。

.glyphicon-2x {
    font-size: 48px;
}
于 2013-09-06T07:50:56.213 に答える
17

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

最初に（要素に直接設定します）

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

2 番目(css ファイルで設定)

.glyphicon{
    font-size: 30px; 
}

3番目（modify-classesの構築）[私はこの可能性を好む]

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

使用法：

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

3 番目のものをより小さくするためのオプションは他にもあります。Lessについてもっと読む必要があります

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

ブートストラップ 2.3

初め

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

2番

.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>
于 2013-10-15T14:22:18.083 に答える
10

これは、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を検討してください。選択したアイコンに基づいてカスタム フォントを生成できます。

于 2013-05-07T22:33:16.900 に答える
4

以下を使用できます。

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

ただし、画像を拡大しているため、大きくなるほどぼやけて見えます。フォント アイコン ライブラリは、より適切にスケーリングされます。

于 2013-05-07T22:43:20.700 に答える
2

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

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

問題は、解像度が原因でアイコンが見苦しくなることです。

お役に立てれば！

于 2013-05-07T22:35:44.907 に答える
2

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

<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 でのみテスト済み)。ブートストラップ 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;}
于 2013-09-06T07:45:37.707 に答える