Большие Глификоны

212

Как сделать большие глифы в загрузчике Twitter 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?

Это дает небольшой глификон:

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

— guiomie
источник

372

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

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

здорово! В моем случае у меня была группа ввода с кнопкой, и эта кнопка была немного больше. Поэтому я просто дал «font-size: 95%» для моего глифика, и это было решено.

— Виктор

41

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

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

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

— Рэнди Гринкорн
источник

2

В целом, встроенные стили не очень хороший подход. Если вам нужны определенные стили для какого-либо компонента, просто примените новый размер шрифта через его родительский класс

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

иногда это один, и вы не можете быть обеспокоены, хотя

— Мэтью Лок

29

.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если собираетесь использовать этот эффект более чем в одном экземпляре), вы получите глификон того же размера, что и большая кнопка.

— Angelique
источник

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

— victorf
источник

2

Написать в систему <h1>или <h2>:

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

— тихо
источник

0

Если вы используете загрузчик 3, используйте тег, как это. Он отлично работает для Bootstrap 3.
Вы можете даже использовать несколько тегов, чтобы установить размер меньше.
Код:


— Valynk
источник

Это полная противоположность вопроса ... если вы не переопределите стили, это сделает его маленьким. Я просто использовал этот тег для его точного назначения на днях.

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