Augmentation de la taille des glyphicons de Bootstrap 2.3

Question

Existe-t-il un moyen simple d'augmenter la taille des Glyphicons ?
J'ai trouvé une solution comme Font Awesome mais je ne veux pas inclure une nouvelle bibliothèque CSS juste pour augmenter la taille de 2 icônes.

Answer 1

Le réglage de la taille de la police de la balise <span> a fonctionné pour moi.

Answer 2

À partir de Bootstrap 3, les glyphicons ont été transformés en polices de caractères plutôt qu'en sprites. Cela vous donne plus de flexibilité. Par exemple, vous pouvez simplement définir l'élément font-size et passer à autre chose.

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

Ou vous pouvez simplement écrire une classe de modification :

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

Answer 3

Il faut juste régler la taille de la police :) Vous avez plus d'une option pour le faire :

Premier (le mettre directement sur l'élément)

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

Deuxièmement (le définir dans un fichier css)

.glyphicon{
    font-size: 30px; 
}

Troisièmement (build modify-classes) [je préfère cette possibilité]

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

Utilisation :

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

il y a plus d'options pour obtenir le troisième plus petit. vous devriez lire plus sur Moins

selon votre question et le commentaire que brandon m'a donné, vous pouvez utiliser ce qui précède avec un autre conteneur d'icône.

Bootstrap 2.3

Premier

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

Deuxièmement

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

Troisièmement

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

Answer 4

C'est l'une des façons d'augmenter la taille des icônes dans Bootstrap 2.3. Comme je l'ai noté dans mon commentaire, les résultats seront assez médiocres car vous mettez à l'échelle l'image du spritesheet.

Démonstration de JSFiddle

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

Pensez à Fontello à la place. Ils vous permettent de générer une police personnalisée à partir des icônes que vous choisissez.

Answer 5

Vous pouvez utiliser :

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

Mais, plus vous agrandissez l'image, plus elle sera floue, car elle est mise à l'échelle. Une bibliothèque d'icônes de police sera beaucoup plus efficace.