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


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>

Ответы:


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


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>


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>

2

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

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

0

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


Это полная противоположность вопроса ... если вы не переопределите стили, это сделает его маленьким. Я просто использовал этот тег для его точного назначения на днях.
Ричард Баркер
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.