Twitter Bootstrap - Agrandir les icônes CSS

Question

J'utilise Twitter Bootstrap et il est indiqué d'utiliser <i class="icon-flag"></i> si je veux utiliser une icône de leur sprite CSS.

Comment puis-je ajouter ma propre classe css appelée .logo-icon qui prendra une de leurs icônes mais la rendra plus grande ?

Ma classe ressemble actuellement à :

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

Answer 1

Le meilleur et le plus facile

est de modifier la taille de la police de l span étiquette

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

ou

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

en utilisant FontAwesome ?

Et si, comme moi, vous utilisez aussi FontAwesome, vous pouvez aller à hybride ;) utiliser ces classes

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

Answer 2

Et si vous utilisez 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 */
}

N'est-il pas plus facile à utiliser et à entretenir ? Vous pouvez obtenir la taille que vous souhaitez sans avoir à recalculer la taille et la position de l'arrière-plan.

Je l'utilise pour réduire la taille des icônes dans certaines parties de mon système. J'ai passé environ 1 heure à chercher une solution pour réduire et j'ai presque oublié scale(). Donc, je partage juste pour aider les autres. =D

Mais, bien sûr, si vous les agrandissez, vous n'obtiendrez pas une icône parfaite.

Answer 3

Ce n'est pas aussi joli que d'utiliser FontAwesome (qui est une vraie police), mais vous pouvez mettre à l'échelle les glyphicons en utilisant l'attribut taille de fond propriété. Cela implique également de mettre à l'échelle toutes les autres valeurs par un facteur identique, ce qui signifie que vous ne pouvez pas le faire de manière générale, mais que vous devrez le faire pour une seule icône à la fois.

Exemple, doubler l'icône du drapeau serait :

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

Si vous voulez faire cela pour des icônes arbitraires, vous feriez mieux de travailler avec LESS où vous pourriez probablement générer cela par programme. Personnellement, je pense que le passage à FontAwesome est la meilleure solution.

Answer 4

Je préfère modifier simplement la taille de la police :

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