Увеличьте размер бутстрапа 2.3 Глификон

Ответ 1

Это один из способов увеличить размер значков в Bootstrap 2.3. Как я отмечаю в своем комментарии, результаты будут довольно плохими, потому что вы масштабируете изображение спрайтов.

JSFiddle demo

.test {
    background-image: url("http://twitter.github.io/bootstrap/assets/img/glyphicons-halflings.png");
    width: 90px;
    height: 90px;
    background-size: 2100px 800px;
}

Рассмотрим Fontello. Они позволяют создавать пользовательский шрифт на основе выбранных вами значков.

Ответ 2

Установка размера шрифта <span> тег работал у меня

<span class="glyphicon glyphicon-ok" style="font-size: 20px;"></span>

Ответ 3

Начиная с Bootstrap 3, глификоны были заменены шрифтами, а не спрайтами. Это дает вам большую гибкость. Например, вы можете просто установить font-size и перейти дальше.

<span class="glyphicon glyphicon-adjust" style="font-size:48px;"></span>

Или вы можете просто написать класс модификатора:

.glyphicon-2x {
    font-size: 48px;
}

Ответ 4

Просто нужно установить шрифт вверх:) У вас есть несколько вариантов:

Первый (установите его прямо на элемент)

<span class="glyphicon glyphicon-search" style="font-size:30px"></span>

Второй (установите его в файле css)

.glyphicon{
    font-size: 30px; 
}

Третий (build modify-classes) [я предпочитаю эту возможность]

.glyphicon-2x{
    font-size: 40px; 
}
.glyphicon-3x{
    font-size: 60px; 
}
...

Использование:

<span class="glyphicon glyphicon-2x glyphicon-search"></span>

есть больше вариантов, чтобы получить третий еще один крошечный. там вы должны больше узнать о Less

в соответствии с вашим вопросом и комментарием, который дал мне брэндон, вы можете использовать вышеупомянутое с другим символом contianer.

Bootstrap 2.3

Первая

<i class="icon-search" style="-webkit-transform:scale(1.8);"></i>

Второй

.icon-search{
    -webkit-transform:scale(1.8);
    -moz-transform:scale(1.8);
    -o-transform:scale(1.8);
}

Третий

.icon-x2{
    -webkit-transform:scale(2.0);
    -moz-transform:scale(2.0);
    -o-transform:scale(2.0);
}
.icon-x3{
    -webkit-transform:scale(3.0);
    -moz-transform:scale(3.0);
    -o-transform:scale(3.0);
}
//here i use the css from above (Bootstrap 3)
//actually you can name it like you want
<i class="icon-search icon-2x"></i>

Ответ 5

Вы можете использовать:

.icon-whatever {
    zoom: 2;
    -moz-transform: scale(2);  /* Firefox */
}

Но это будет выглядеть более суровым, чем больше вы идете, так как это масштабирование изображения вверх. Библиотека шрифтов будет масштабироваться намного лучше.

Ответ 6

Вы можете переопределить класс начальной загрузки, например:

// Size and position are not working.
.icon-glass {
  background-size: 800px;
  backgroung-position: 10px 50px;
  width: 24px;
  height: 24px;
}

Проблема в том, что иконы будут выглядеть уродливыми из-за разрешения.

Надеюсь, это поможет!

Ответ 7

Если вы используете глификоны для кнопок, это довольно просто:

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span>
</button>

Btn-lg определяет размер. Вы можете использовать btn-lg, bnt-sm, btn-sx

Изменить: Если вы не используете кнопки или lg недостаточно велик, вы можете добавить собственный класс и использовать размер шрифта (только в бутстрапе 3.0). В бутстрапе 3.0 глификоны существуют как .svg, поэтому они не будут выглядеть уродливыми

Пример:

<button type="button" class="btn btn-default btn-lg myGlyphicon">
  <span class="glyphicon glyphicon-star"></span>
</button>

CSS

.myGlyphicon {font-size: 120%;}

или

.myGlyphicon {font-size: 70px;}

Ответ 8

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

Ответ 9

Если вы используете Bootstrap 3, почему бы вам не использовать ширину em на значке? Если значки встроены в заголовки/абзацы/тела и т.д., То использование размера шрифта в em увеличит размер значков относительно абзаца, в котором они находятся.

Например, если у вас есть:

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

В css, который настраивает ваш bootstrap, просто добавьте:

.glyphicon {font-size: 1.25 em;}

Это масштабирует глифы.

Ответ 10

Я просто нашел очень простой способ - использовать "transform". Например, место:

.glyphicon-chevron-right {transform:scale(2.9,2.9);}

в вашем CSS, чтобы увеличить его в 2.9 раза.

Ответ 11

Попробуйте включить класс lead

<span class="glyphicon glyphicon-home lead"></span>

Или поместите его в тег <h4>