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>
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;
}
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>
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>
Ja, und grundsätzlich können Sie auch Inline-Style verwenden:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
versuchen Sie, Überschriften zu verwenden, kein zusätzliches CSS
<h1 class="glyphicon glyphicon-plus"></h1>
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
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>