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>
css twitter-bootstrap twitter-bootstrap-3 glyphicons guiomie
źródło

Odpowiedzi:

372

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

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

źródło
ś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 <span>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. <small><span class="glyphicon glyphicon-send"></span></small>Działa idealnie dla Bootstrap 3.
Możesz nawet użyć wielu <small>tagów, aby ustawić mniejszy rozmiar.
Kod:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

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