Bigger Glyphicons

Question

Как сделать большие глификоны в twitter bootstrap 3.0 (не 2.3.x).

Этот код сделает мои glyphicons большой:

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

Как я могу получить этот размер без с использованием БТН-Л.Г. класса при использовании только пролет?

Это дает небольшой glyphicon:

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

Answer 1

Вы можете просто дать glyphicon размера шрифта по своему вкусу:

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

Answer 2

.btn-lg класс имеет следующий CSS в Bootstrap 3 (link):

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

Если вы применяете тот же самый font-size и line-height на ваш диапазон (либо .glyphicon-link, либо только что созданный .glyphicons-lg, если вы собираетесь использовать этот эффект более чем в одном экземпляре), вы получите Glyphicon того же размера, что и большая кнопка.

Answer 3

Вот как я это делаю:

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

Это позволяет изменять размер на лету. Лучше всего подходит для специальных требований для изменения размера, а не для изменения css и его применения ко всем.

Answer 4

В моем случае у меня был input-group-btn с button, и этот button был немного больше, чем его контейнер. Поэтому я просто дал font-size:95% для моего глификона, и он был решен.

<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

Если вы используете загрузчик 3, использование тегов, как этот <small><span class="glyphicon glyphicon-send"></span></small> Он работает идеально подходит для Bootstrap 3.
Вы даже можете использовать несколько <small> тегов, чтобы установить размер более меньше.
Код:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

Answer 7

Написать свой <span> в <h1> или <h2>:

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