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

Как увеличить глификоны в 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>

css twitter-bootstrap twitter-bootstrap-3 glyphicons
person guiomie    schedule 28.08.2013    source источник

Ответы (6)


arrow_upward
372
arrow_downward

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

span.glyphicon-link {
    font-size: 1.2em;
}
person Community    schedule 28.08.2013
comment
отличный! В моем случае у меня была input-group-btn с кнопкой, и эта кнопка была немного больше. Поэтому я просто указал размер шрифта: 95% для своего глификона, и проблема была решена. - person victorf; 22.01.2016

arrow_upward
41
arrow_downward

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

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

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

person Randy Greencorn    schedule 04.03.2015
comment
В целом встроенные стили не являются хорошим подходом. Если вам нужны определенные стили для какого-либо компонента, просто примените новый размер шрифта через его родительский класс. - person Kaloyan Stamatov; 17.06.2016
comment
иногда это один раз, и вы не можете беспокоиться, хотя - person Matthew Lock; 02.03.2017

arrow_upward
29
arrow_downward

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

person Angelique    schedule 28.08.2013
comment
добавление класса btn-lg намного проще. Хороший ответ! - person Neel; 03.05.2014

arrow_upward
2
arrow_downward

В моем случае у меня был 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>
person victorf    schedule 22.01.2016

arrow_upward
2
arrow_downward

Напишите <span> в <h1> или <h2>:

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
person quiet    schedule 11.06.2016

arrow_upward
0
arrow_downward

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

person Valynk    schedule 01.04.2016
comment
Это полная противоположность вопросу ... если вы не переопределите стили, это сделает его маленьким. Я просто использовал этот тег по прямому назначению на днях. - person Richard Barker; 30.01.2018