Większe Glify

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

Ten kod sprawi, że moje glify 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żywając klasy btn-lg podczas używania tylko a span ?

To daje mały glifikon: 

<span class="glyphicon glyphicon-link"></span>
Author: guiomie, 2013-08-28
Source

7 answers

Możesz po prostu dać gliphiconowi rozmiar czcionki do swoich upodobań: 

span.glyphicon-link {
    font-size: 1.2em;
}
 366
Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-28 02:28:14

Oto Jak to robię: 

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

Pozwala to na zmianę rozmiaru w locie. Najlepiej sprawdza się w przypadku wymagań ad hoc, aby zmienić rozmiar, zamiast zmieniać css i mieć zastosowanie do wszystkich.

 38
Author: Randy Greencorn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-04 00:09:44

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

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

Jeśli zastosujesz te same font-size i line-height do swojego zakresu (.glyphicon-link lub nowo utworzonego .glyphicons-lg, jeśli chcesz użyć tego efektu w więcej niż jednym wystąpieniu), otrzymasz Gliphicon o takim samym rozmiarze jak duży przycisk.

 29
Author: Angelique,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-28 02:32:24 

<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
Author: barış çıracı,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-11 08:49:13

W moim przypadku miałem input-group-btn z button, a ten button był trochę większy niż jego Pojemnik. Więc dałem font-size:95% za mój gliphicon i zostało to rozwiązane.

<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
Author: Victor F,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-22 17:27:46

Wpisz swoje <span> w <h1> lub <h2>: 

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
 2
Author: quiet,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-11 09:29:15

Jeśli używasz Bootstrap 3, Użyj tag, jak to {[0] } działa idealnie dla Bootstrap 3.
Możesz nawet użyć wielu znaczników <small>, aby ustawić rozmiar bardziej mniejszy.
Kod:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

 0
Author: Valynk,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-01 11:06:49