Ich möchte den Globus glyphicon größer machen, so dass es einen großen Teil der Seite bedeckt (es ist ein Vektorbild). Es ist nicht in einem Knopf oder irgendetwas; es ist nur allein. Gibt es eine Möglichkeit, dies zu tun?Wie mache ich Glyphicons größer? (Größe ändern?)
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe"></span>
</div>
Erhöhen Sie die Schriftgröße von glyphicon, um alle Symbole zu vergrößern.
.glyphicon {
font-size: 50px;
}
Um nur ein Symbol Ziel,
.glyphicon.glyphicon-globe {
font-size: 75px;
}
Das hat geklappt! (Ich akzeptiere es in 5 Minuten (das ist die verbleibende Zeit)) Gibt es eine Möglichkeit, es zu zentrieren? @VenomVendor – CoderBryan
'Text-Center' auf dem Div. – Aibrean
, um das Glyphon größer zu machen "on demand" verwenden .glyphicon.larger { Schriftgröße: 150%; } – user216661
Fontawesome hat eine perfekte Lösung für dieses Problem.
Ich implementiert das gleiche. nur auf Ihre Haupt-.css-Datei fügen Sie diese
.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 nur dies tun.
<div class = "jumbotron">
<span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
try Überschrift zu verwenden, keine Notwendigkeit, zusätzliche CSS
<h1 class="glyphicon glyphicon-plus"></h1>
Sie können dies tun, aber es gibt Ihnen kein feines Maß an Kontrolle, wie es ein bisschen CSS tun würde. – MattD
Die Verwendung von Headern aufgrund ihrer Auswirkungen auf die Schriftgröße ist ein Anti-Pattern. Ein Benutzer, der mit der Tastatur auf Ihre Website navigiert, wird direkt an Ihr Symbol gesendet, da der Bildschirmleser annimmt, dass er einen Titel/eine Überschrift für den wichtigsten Inhalt der Seite angibt. – Roy
Wenn Sie Bootstrap und font-awesome verwenden, dann ist es leicht, keine Notwendigkeit, eine einzige Zeile Code neu zu schreiben, fügen Sie einfach fa-Nx, wie groß Sie wollen, See the demo
<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 und Font-Awesome vereinen sich! – Timo
Für ex .. Add Klasse:
BTN-lg - LARGE
BTN-sm - SMALL
BTN-xs - Sehr kleine
<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
Die Frage betraf die Bilder, nicht die Bilder als Knöpfe. – user216661
Ja, und im Grunde können Sie auch inline verwenden Stil:
<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
Ich habe Bootstrap-Header-Klassen verwendet ("h1", "h2", etc.)) dafür. Auf diese Weise erhalten Sie alle Vorteile, ohne die eigentlichen Tags zu verwenden. Hier ein Beispiel:
<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>
Mögliche Duplikat [Bigger Glyphicons] (https://stackoverflow.com/questions/18478365/bigger-glyphicons) –