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

198

Как сделать большие глификоны в 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>
Теги:
twitter-bootstrap-3
glyphicons

7 ответов

384
Лучший ответ

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

span.glyphicon-link {
    font-size: 1.2em;
}
Поделиться
  • 0
    отличный! В моем случае у меня была кнопка input-group-btn, и эта кнопка была немного больше. Так что я просто дал «font-size: 95%» для моего глифика, и это было решено.
39

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

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

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

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

Введите <span> в <h1> или <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
Поделиться
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>
Поделиться
0

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню