web-dev-qa-db-ja.com

Glyphiconsを大きくする方法（サイズ変更？）

ページの大部分を覆うように、地球規模のグリフィコンを大きくしたいと思います（ベクトル画像です）。ボタンなどではありません。それはただ一人です。これを行う方法はありますか？

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>
htmlcsstwitter-bootstrapglyphicons
224
CoderBryan

すべてのアイコンのサイズを大きくするには、glyphiconのfont-sizeを大きくします。

.glyphicon {
    font-size: 50px;
}

1つのアイコンだけをターゲットにするには

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

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>
138
Mr. Crowley

ブートストラップと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>
66
Ali Adravi

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

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

見出しを使用してみてください。追加のcssは必要ありません。

<h1 class="glyphicon glyphicon-plus"></h1>
11
Bagus Cahyono

例えば..クラスを追加する：

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ブートストラップ

9
OpenWebWar

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

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

0
Alex Kozlov