Больше Технологии Glyphicons


Как сделать больше технологии glyphicons в Twitter начальной загрузки 3.0 (не 2.3.икс.)

этот код будет делать мой технологии glyphicons большой:

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

Как я могу получить этот размер без использование класса btn-lg при использовании только пролет ?

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

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

7 ответов:

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

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

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

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

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

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

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

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

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

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

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

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

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

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