web-dev-qa-db-fra.com

Augmenter la taille des glyphiques de Bootstrap 2.3)

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

javascriptjquerycsstwitter-bootstrap
38
Himanshu Yadav

C’est un moyen d’augmenter la taille des icônes dans Bootstrap 2.3. Comme je l’ai noté dans mon commentaire, les résultats seront plutôt médiocres, car vous redimensionnez l’image de feuille.

démo JSFiddle

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

Considérez Fontello à la place. Ils vous permettent de générer une police personnalisée en fonction des icônes que vous choisissez.

10
Rajender Joshi

Définir la taille de la police de la balise <span> a fonctionné pour moi

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

À partir de Bootstrap 3, les glyphicons ont été modifiés en polices plutôt qu'en images-objets. Cela vous donne plus de flexibilité. Par exemple, vous pouvez définir le font-size et avance.

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

Ou vous pouvez simplement écrire une classe de modificateur:

.glyphicon-2x {
    font-size: 48px;
}
32
Umur Kontacı

Il vous suffit de définir la taille de la police :) Vous avez plusieurs options pour cela:

First (définissez-le directement sur l'élément)

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

Second (définissez-le dans un fichier css)

.glyphicon{
    font-size: 30px; 
}

Troisième (construire des classes de modification) [Je préfère cette possibilité] 

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

Usage:

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

il y a plus d'options pour obtenir le troisième plus petit. là pour vous devriez en savoir plus sur Less

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

Bootstrap 2.3

Premier 

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

Seconde 

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

Troisième 

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

Vous pouvez utiliser:

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

Mais plus vous irez grand, plus l'image sera grande. Une bibliothèque de fontes-icônes sera bien plus évolutive.

4
dave

Si vous utilisez les glyphicons pour les boutons, c'est assez simple:

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

Le btn-lg définit la taille. Vous pouvez utiliser btn-lg, bnt-sm, btn-sx

Edit: Si vous n’utilisez pas de boutons ou que lg n’est pas assez grand, vous pouvez ajouter une classe et utiliser font-size (seulement testé dans bootstrap 3.0). Dans bootstrap 3.0 existent en tant que .svg pour ne pas paraître laid

Exemple:

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

CSS:

.myGlyphicon {font-size: 120%;}

ou

.myGlyphicon {font-size: 70px;}
2
kinske

Vous pouvez remplacer la classe de bootstrap, par exemple:

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

Le problème est que les icônes auront une apparence moche en raison de la résolution.

J'espère que cela t'aides!

2
cortex

Vous pouvez utiliser IcoMoon.io un outil très facile à utiliser pour générer des polices de caractères de différentes couleurs, de tailles et même que vous le pouvez. générer des sprites à partir de votre sélection.

2
itsbalamurali

Je viens de trouver un moyen très simple: utiliser "transformer". Par exemple, placez:

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

dans votre CSS pour l'augmenter 2,9 fois.

1
Gabriel

Si vous utilisez Bootstrap 3, pourquoi n'utilisez-vous pas em widths sur l'icône? Si les icônes sont incorporées dans des en-têtes/paragraphes/corps, etc., utilisez alors un La taille de la police dans ems augmentera la taille des icônes par rapport au paragraphe dans lequel elles se trouvent.

Par exemple, si vous avez:

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

Dans le css qui personnalise votre bootstrap, ajoutez simplement:

.glyphicon {font-size: 1.25 em;}

Cela mettra à l'échelle les glyphes.

1
David Peters

Essayez d'inclure la classe lead

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

enter image description here

Ou rap dans un <h4> tag

0
Sasi Varunan