グリフィコンを大きくするにはどうすればよいですか?(サイズを変更しますか?)


239

地球のグリフィコンを大きくして、ページの大部分をカバーできるようにしたいと思います(ベクター画像です)。ボタンなどにはありません。それはただ一人です。これを行う方法はありますか?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>  

回答:


367

のフォントサイズglyphiconを大きくして、すべてのアイコンのサイズを大きくします。

.glyphicon {
    font-size: 50px;
}

1つのアイコンのみをターゲティングするには、

.glyphicon.glyphicon-globe {
    font-size: 75px;
}

2
うまくいきました!(私は5分以内にそれを受け入れます(それは残り時間です))それを中央に配置する方法はありますか?@VenomVendor
CoderBryan 14

2
text-centerdiv。
Aibrean 2014

7
「オンデマンド」でグリフィコンを大きくするには、.glyphicon.larger {font-size:150%;を使用します。}
user216661 2016

薄くするのはどうですか?
Nofel 2017

!important;boostrap CSSをオーバーライドするには、フォントサイズを追加する必要がありました。
MeanwhileInHell

143

Fontawesomeには、これに対する完璧なソリューションがあります。

私は同じを実装しました。あなたのメインの.cssファイルにこれを追加してください

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

あなたの例では、あなたはこれをしなければなりません。

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>  

いいね!1.5emなどの小数も使用できます。
Mike Taverne、2016年

受け入れられた回答よりもはるかに優れており、繰り返し発生する問題に対する一般的な解決策を示しています。
アダム

71

ブートストラップとfont-awesomeを使用している場合は、簡単です。新しいコードを1行書く必要はありません。必要に応じてfa-Nxを追加するだけです。デモをご覧ください。

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>

GlyphiconsとFont-Awesomeが力を合わせます!
Timo

私はFAとグリフィコンを組み合わせることに賛成ではありません。インラインスタイルを使用するか、上記のcssクラスを使用してグリフィコンをアップサイズする方法については、以下の回答を参照してください。または、純粋なFAソリューションの場合-> fa fa-globe fa-2x(v4.x)
MarcoZen

MarcoZen:とにかく、次のバージョンのブートストラップ4グリフィコンは削除される予定です。以前の私たちの多くが一緒に使用していました。
Ali Adravi

17

はい、基本的にはインラインスタイルも使用できます。

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>

11

見出しを使用してみてください、余分なCSSは必要ありません

<h1 class="glyphicon glyphicon-plus"></h1>

2
これは可能ですが、CSSのような細かいレベルの制御はできません。
MattD 2015

6
font-sizeへの影響のためにヘッダーを使用することは、アンチパターンです。スクリーンリーダーはページの最も重要なコンテンツのタイトル/見出しを意味すると想定しているため、キーボードでサイトを操作しているユーザーは、直接アイコンに送られます。
Roy

9

ex ..クラスを追加します。

btn-lg-大きい

btn-sm-小さい

btn-xs-非常に小さい

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

参照リンクブートストラップ:Glyphiconsブートストラップ


7
質問では、画像をボタンではなく画像と見なしました。
user216661 2016

0

これには、ブートストラップヘッダークラ​​ス(「h1」、「h2」など)を使用しました。このようにして、実際のタグを使用せずにスタイルのすべての利点を得ることができます。次に例を示します。

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.