Większe glify

212

Jak zrobić większe glify w twitter bootstrap 3.0 (nie 2.3.x).

Ten kod sprawi, że moje glifiki będą duże:

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

Jak mogę uzyskać ten rozmiar bez użycia klasy btn-lg, używając tylko zakresu ?

To daje mały glif:

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

— guiomie
źródło

372

Możesz po prostu nadać glifikonowi rozmiar czcionki według własnych upodobań:

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

świetny! W moim przypadku miałem grupę wejściową-btn z przyciskiem, a ten przycisk był nieco większy. Dałem więc tylko „rozmiar czcionki: 95%” dla mojego glifikonu i zostało to rozwiązane.

— victorf

41

Oto jak to robię:

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

Pozwala to na zmianę rozmiaru w locie. Działa najlepiej w przypadku wymagań ad hoc, aby zmienić rozmiar, zamiast zmieniać css i stosować go do wszystkich.

— Randy Greencorn
źródło

2

Ogólnie rzecz biorąc, style wbudowane nie są dobrym podejściem. Jeśli potrzebujesz określonych stylów dla jakiegoś komponentu, po prostu zastosuj nowy rozmiar czcionki za pośrednictwem jego klasy nadrzędnej

— Kaloyan Stamatov,

czasami jest to jednorazowy przypadek i nie można się tym przejmować

— Matthew Lock

29

.btn-lgKlasa ma następujące CSS w Bootstrap 3 ( linku ):

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

Jeśli zastosujesz to samo font-sizei line-heightdo swojego zakresu (albo .glyphicon-linknowo utworzonego, .glyphicons-lgjeśli zamierzasz użyć tego efektu w więcej niż jednej instancji), otrzymasz Glyphicon tego samego rozmiaru co duży przycisk.

— Angelique
źródło

4

dodanie btn-lgklasy jest znacznie łatwiejszą opcją. Dobra odpowiedź!

— 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>

Rozwiń fragment kodu

— barış çıracı
źródło

2

W moim przypadku miałem input-group-btnz button, a to buttonbyło trochę większe niż jego pojemnik. Po prostu oddałem font-size:95%swój glificon i został on rozwiązany.

<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
źródło

2

Napisz w <h1>lub <h2>:

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

— cichy
źródło

0

Jeśli używasz bootstrap 3, użyj tagu, takiego jak to. Działa idealnie dla Bootstrap 3.
Możesz nawet użyć wielu tagów, aby ustawić mniejszy rozmiar.
Kod:


— Valynk
źródło

Jest to dokładne przeciwieństwo pytania ... chyba że przesłonisz style, dzięki czemu będzie mały. Właśnie użyłem tego tagu do jego dokładnego celu innego dnia.

— Richard Barker