it-swarm.com.de

Größere Glyphicons

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

Dieser Code wird meine Glyphen groß machen:

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

Wie kann ich diese Größe ohne mit der Klasse btn-lg erhalten, während ich nur eine Spanne verwende?

Dies ergibt ein kleines Glyphikon:

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

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

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

So mache ich es:

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

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

41
Randy Greencorn

Die .btn-lg -Klasse 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 den gleichen font-size und line-height auf Ihren Bereich anwenden (entweder .glyphicon-link oder einen neu erstellten .glyphicons-lg, wenn Sie diesen Effekt in mehr als einer Instanz verwenden möchten) Sie erhalten ein Glyphicon in der Größe des großen Buttons.

29
Angelique
<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>
6

Schreibe deinen <span> in <h1> oder <h2>:

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

In meinem Fall hatte ich einen input-group-btn mit einem button, und dieser button war etwas größer als sein Behälter. Also gab ich font-size:95% für mein Glyphicon 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>
2
victorf

Wenn Sie bootstrap 3 verwenden, verwenden Sie ein Tag wie dieses <small><span class="glyphicon glyphicon-send"></span></small>. Es funktioniert perfekt für Bootstrap 3.
Sie können sogar mehrere <small> Tags verwenden, um die Größe zu verkleinern.
Code:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

0
Valynk