Ответ 1
Вы можете просто придать глифику размер шрифта по своему вкусу:
span.glyphicon-link {
font-size: 1.2em;
}
Как сделать большие глификоны в twitter bootstrap 3.0 (не 2.3.x).
Этот код сделает мои глификоны большими:
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-th-list">
</span>
</button>
Как я могу получить этот размер без с помощью класса btn-lg при использовании только диапазона?
Это дает небольшой глификон:
<span class="glyphicon glyphicon-link"></span>
Вы можете просто придать глифику размер шрифта по своему вкусу:
span.glyphicon-link {
font-size: 1.2em;
}
Вот как я это делаю:
<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>
Это позволяет изменять размер на лету. Лучше всего подходит для специальных требований для изменения размера, а не для изменения css и его применения ко всем.
Класс .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%
для своего глификона, и он был решен.
<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>
в <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>