wake-up-neo.com

Wie mache ich Glyphicons größer? (Größe ändern?)

Ich möchte das Globus-Glyphikon so vergrößern, dass es einen großen Teil der Seite (es ist ein Vektorbild) bedeckt. Es ist nicht in einer Taste oder irgendetwas; es ist nur alleine Gibt es eine Möglichkeit, dies zu tun?

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

Erhöhen Sie die Schriftgröße von glyphicon, um die Größe aller Symbole zu erhöhen.

.glyphicon {
    font-size: 50px;
}

Um nur ein Symbol anzuvisieren, 

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

Fontawesome hat dafür eine perfekte Lösung.

Ich habe das Gleiche umgesetzt. Fügen Sie dies einfach in Ihrer .css-Hauptdatei hinzu

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

In Ihrem Beispiel müssen Sie das nur tun.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
136
Mr. Crowley

Wenn Sie bootstrap und font-awesome verwenden, ist es einfach, keine einzige Zeile neuen Codes zu schreiben. Fügen Sie einfach fa-Nx hinzu, so groß Sie möchten. Demo ansehen

<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

Ja, und grundsätzlich können Sie auch Inline-Style verwenden: 

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

versuchen Sie, Überschriften zu verwenden, kein zusätzliches CSS

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

Für ex .. Klasse hinzufügen: 

btn-lg - groß

btn-sm - KLEIN 

btn-xs - sehr klein

<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>

Ref link Bootstrap: Glyphicons Bootstrap

9
OpenWebWar

Ich habe dazu Bootstrap-Header-Klassen ("h1", "h2" usw.) verwendet. Auf diese Weise erhalten Sie alle Stilvorteile, ohne die eigentlichen Tags zu verwenden. Hier ist ein Beispiel:

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

0
Alex Kozlov