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;
}