Twitter Bootstrap - Создание значков CSS больше

Я использую Twitter Bootstrap, и он говорит использовать <i class="icon-flag"></i>, если я хочу использовать значок из своего CSS-спрайта.

Как добавить свой собственный класс css под названием .logo-icon, который займет один из своих значков, но сделает его больше?

Мой класс выглядит следующим образом:

.logo-icon {
    background-image: url("../img/glyphicons-halflings-white.png");
    background-position: -312px -24px;
}

Ответ 1

Это не будет выглядеть так же хорошо, как использование FontAwesome (который является фактическим шрифтом), но вы можете масштабировать глификоны, используя свойство background-size. Это также повлечет за собой масштабирование всех остальных значений с помощью одинакового коэффициента, а это значит, что вы не можете просто сделать это в целом, но вам нужно будет сделать это для одного значка за раз.

Например, удвоение значка флага будет:

.icon-flag.logo-icon {
  width: 28px;  // 14px * 2
  height: 28px; // 14px * 2
  background-size: 938px 318px;  // original dimensions * 2
  background-position: -624px -48px;  // original position * 2
}

Если вы хотите сделать это для любых значков, вам лучше работать с LESS, где вы, вероятно, могли бы сгенерировать это программно. Лично я считаю, что переход на FontAwesome - лучшая альтернатива.

Ответ 2

лучший и простой

- изменить размер шрифта тега span

span.glyphicon {
    font-size: 8px;  
}

или

<span class="glyphicon glyphicon-check" style="font-size: 1.2em"></span>

с использованием FontAwesome?

И если, как и я, вы также используете FontAwesome, вы можете пойти гибридный;) используйте эти классы

<span class="glyphicon glyphicon-check fa-lg"></span>
<span class="glyphicon glyphicon-check fa-2x"></span>
<span class="glyphicon glyphicon-check fa-3x"></span>
<span class="glyphicon glyphicon-check fa-4x"></span>

Ответ 3

Что делать, если вы используете scale()???

.logo-icon {
    transform:scale(2.0,2.0);
    -ms-transform:scale(2.0,2.0); /* IE 9 */
    -moz-transform:scale(2.0,2.0); /* Firefox */
    -webkit-transform:scale(2.0,2.0); /* Safari and Chrome */
    -o-transform:scale(2.0,2.0); /* Opera */
}

Не проще ли использовать и поддерживать? Вы можете масштабировать любой желаемый размер без пересчета размера фона и положения.

Я использую это для уменьшения размера значков в некоторых частях моей системы. Я потратил около 1 часа на поиск решения для сокращения и почти забыл о scale(). Итак, просто поделитесь, чтобы помочь другим. = D

Но, конечно, если вы сделаете их больше, вы не получите идеальную красивую иконку.

Ответ 4

Я предпочитаю просто изменить размер шрифта:

.large-icon {
  padding: 11px 15px;
  font-size: 40px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}