Великі гліфікони

212

Як зробити великі гліфікони в 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>

— guiomie
джерело

372

Ви можете просто надати гліфікону розмір шрифту на свій смак:

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

чудово! У моєму випадку у мене була вхідна група-btn з кнопкою, і ця кнопка була трохи більшою. Тож я просто дав "шрифт: 95%" для мого гліфікону, і це було вирішено.

— victorf

41

Ось як я це роблю:

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

Це дозволяє змінювати розмір на льоту. Найкраще підходить для спеціальних вимог щодо зміни розміру, а не для зміни CSS та його застосування для всіх.

— Ренді Грінкорн
джерело

2

Взагалі стилі інлайнерів не є гарним підходом. Якщо вам потрібні певні стилі для якогось компонента, просто застосуйте новий розмір шрифту через його батьківський клас

— Калоян Стаматов

іноді це одноразово, і ти не можеш турбуватися, хоча

— Меттью Лок

29

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 такого ж розміру, як і велика кнопка.

— Анжеліка
джерело

4

додавання btn-lgкласу набагато простіший варіант. Хороша відповідь!

— Ніл

6

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

Розгорніть фрагмент

— barış çıracı
джерело

2

У моєму випадку у мене був input-group-btna 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>

— victorf
джерело

2

Написати в систему <h1>або <h2>:

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

— тихо
джерело

0

Якщо ви використовуєте bootstrap 3, використовуйте тег, як це. Він ідеально підходить для Bootstrap 3.
Ви навіть можете використовувати кілька тегів, щоб встановити розмір менше.
Код:


— Валинк
джерело

Це прямо протилежне питанню ... якщо ви не перекриєте стилі, це зробить його невеликим. Я просто використав цей тег для його точного призначення днями.

— Річард Баркер