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>

css twitter-bootstrap twitter-bootstrap-3 glyphicons 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;
}

quelle

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

Größere Glyphicons

Antworten: