Większe glify

Question

Jak utworzyć większe Glify w programie Twitter bootstrap 3.0 (nie 2.3.x).

Ten kod uczyni moje glyphicons duży:

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

Jak mogę dostać tej wielkości bez użyciu klasy BTN-lg podczas korzystania tylko rozpiętość?

Daje niewielką glyphicon:

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

Answer 1

Można dajcie glyphicon się rozmiar czcionki do swoich potrzeb:

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

Answer 2

Klasa .btn-lg ma następującą CSS w Bootstrap 3 (link):

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

Jeśli zastosujesz to samo font-size i line-height do swojej przęsła (.glyphicon-link lub nowo utworzonego .glyphicons-lg, jeśli zamierzasz użyć tego efektu w więcej niż jednej instancji), otrzymasz Glify o takim samym rozmiarze co duży przycisk.

Answer 3

Oto jak to zrobić:

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

To pozwala na zmianę rozmiaru w locie. Działa najlepiej w przypadku wymagań ad hoc, aby zmienić rozmiar, zamiast zmieniać css i mieć zastosowanie do wszystkich.

Answer 4

W moim przypadku miałem input-group-btn z button, a ten button był nieco większy niż jego pojemnik. Więc właśnie dałem font-size:95% dla mojego glifotypu i został 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> 

Answer 5

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

Answer 6

Jeśli używasz bootstrap 3, stosowanie znaczników, jak to <small><span class="glyphicon glyphicon-send"></span></small> Działa on idealny dla Bootstrap 3.
Można nawet korzystać z wielu <small> tagów ustawić rozmiar więcej mniejszy.
Kod:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

Answer 7

napisać swój <span> w <h1> lub <h2>:

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