Größere Glyphicons

212

Wie erstelle ich größere Glyphicons in Twitter Bootstrap 3.0 (nicht 2.3.x)?

Dieser Code macht meine Glyphicons groß:

<button type="button" class="btn btn-default btn-lg">
   <span class="glyphicon glyphicon-th-list">
   </span>
</button>

Wie kann ich diese Größe erhalten, ohne die Klasse btn-lg zu verwenden, während nur eine Spanne verwendet wird?

Dies ergibt ein kleines Glyphikon:

<span class="glyphicon glyphicon-link"></span>

— Guiomie
quelle

372

Sie können dem Glyphicon einfach eine Schriftgröße geben, die Ihren Wünschen entspricht:

span.glyphicon-link {
    font-size: 1.2em;
}

großartig! In meinem Fall hatte ich eine Eingabegruppen-BTN mit einer Schaltfläche, und diese Schaltfläche war etwas größer. Also habe ich nur "Schriftgröße: 95%" für mein Glyphicon angegeben und es wurde gelöst.

— Victorf

41

So mache ich das:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

Auf diese Weise können Sie die Größe im laufenden Betrieb ändern. Funktioniert am besten für Ad-hoc-Anforderungen, um die Größe zu ändern, anstatt das CSS zu ändern und es für alle gelten zu lassen.

— Randy Greencorn
quelle

2

Im Allgemeinen sind Inline-Stile kein guter Ansatz. Wenn Sie bestimmte Stile für eine Komponente benötigen, wenden Sie einfach die neue Schriftgröße über die übergeordnete Klasse an

— Kaloyan Stamatov,

Manchmal ist es einmalig und man kann sich nicht darum kümmern

— Matthew Lock

29

Die .btn-lgKlasse hat das folgende CSS in Bootstrap 3 ( Link ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Wenn Sie dasselbe font-sizeund line-heightauf Ihre Spanne anwenden (entweder .glyphicon-linkoder neu erstellt, .glyphicons-lgwenn Sie diesen Effekt in mehr als einer Instanz verwenden möchten), erhalten Sie ein Glyphicon mit der gleichen Größe wie die große Schaltfläche.

— Angelique
quelle

4

Das Hinzufügen der btn-lgKlasse ist viel einfacher. Gute Antwort!

— Neel

6

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>

Erweitern Sie das Snippet

— barış çıracı
quelle

2

In meinem Fall hatte ich eine input-group-btnmit a button, und diese buttonwar etwas größer als der Behälter. Also gab ich nur font-size:95%für mein Glyphikon und es wurde gelöst.

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>

— victorf
quelle

2

Schreiben Sie Ihre in <h1>oder <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

— ruhig
quelle

0

Wenn Sie Bootstrap 3 verwenden, verwenden Sie ein Tag wie dieses. Es funktioniert perfekt für Bootstrap 3.
Sie können sogar mehrere Tags verwenden, um die Größe kleiner festzulegen.
Code:


— Valynk
quelle

Dies ist das genaue Gegenteil der Frage ... wenn Sie die Stile nicht überschreiben, wird sie klein. Ich habe dieses Tag neulich nur für seinen genauen Zweck verwendet.

— Richard Barker