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>

— CoderBryan
quelle

Mögliches Duplikat von Bigger Glyphicons

— Kevin Workman

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