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

239

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

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>
html css twitter-bootstrap glyphicons CoderBryan
quelle
Mögliches Duplikat von Bigger Glyphicons
Kevin Workman

Antworten:

367

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

.glyphicon {
    font-size: 50px;
}

Um nur ein Symbol anzuvisieren, 

.glyphicon.glyphicon-globe {
    font-size: 75px;
}
VenomVendor
quelle
2
Das hat funktioniert! (Ich akzeptiere es in 5 Minuten (das ist die verbleibende Zeit)) Gibt es eine Möglichkeit, es zu zentrieren? @ VenomVendor
CoderBryan
2
text-centerauf der div.
Aibrean
7
Um das Glyphicon "on demand" zu vergrößern, verwenden Sie .glyphicon.larger {Schriftgröße: 150%; }
user216661
Was ist damit, es dünner zu machen?
Nofel
Ich musste !important;die Schriftgröße erhöhen, um das Boostrap-CSS zu überschreiben.
Inzwischen
143

Fontawesome hat eine perfekte Lösung dafür.

Ich habe das gleiche implementiert. Fügen Sie dies einfach in Ihre CSS-Hauptdatei ein

.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 dies nur tun.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
Herr Crowley
quelle
Nett! Sie können auch Teilbeträge wie 1.5em verwenden.
Mike Taverne
Viel besser als die akzeptierte Antwort und zeigt eine generische Lösung für ein wiederkehrendes Problem.
Adam
71

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. Sehen Sie sich die Demo an

<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>
Ali Adravi
quelle
Glyphicons und Font-Awesome schließen sich zusammen!
Timo
Ich bin nicht dafür, FA und Glyphicons zu kombinieren. In der folgenden Antwort erfahren Sie, wie Sie das Glyphikon mithilfe des Inline-Stils oder über eine CSS-Klasse oben vergrößern. Oder für eine reine FA-Lösung verwenden -> fa fa-globus fa-2x (v4.x)
MarcoZen
MarcoZen: Trotzdem werden bis zur nächsten Version von Bootstrap 4 Glyphicons entfernt, die viele von uns früher zusammen verwendet haben.
Ali Adravi
17

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

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

versuchen Sie die Überschrift zu verwenden, keine zusätzliche CSS erforderlich

<h1 class="glyphicon glyphicon-plus"></h1>
Bagus Cahyono
quelle
2
Sie können dies tun, aber es gibt Ihnen keine gute Kontrolle, wie es ein bisschen CSS tun würde.
MattD
6
Die Verwendung von Headern aufgrund ihrer Auswirkung auf die Schriftgröße ist ein Anti-Pattern. Ein Benutzer, der über die Tastatur auf Ihrer Website navigiert, wird direkt zu Ihrem Symbol gesendet, da der Bildschirmleser davon ausgeht, dass er einen Titel / eine Überschrift für den wichtigsten Inhalt der Seite anzeigt.
Roy
9

Zum Beispiel .. Klasse hinzufügen:

btn-lg - GROSS

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

OpenWebWar
quelle
7
Die Frage betrachtete die Bilder, nicht die Bilder als Schaltflächen.
user216661
0

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

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

Alex Kozlov
quelle