web-dev-qa-db-fra.com

Comment rendre les glyphicons plus gros? (Changer la taille?)

Je voudrais agrandir le glyphicon du globe afin qu’il recouvre une grande partie de la page (c’est une image vectorielle). Ce n'est pas dans un bouton ou quoi que ce soit; c'est juste seul. Y a-t-il un moyen de faire cela?

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe"></span>
</div>
htmlcsstwitter-bootstrapglyphicons
218
CoderBryan

Augmentez la taille de police de glyphicon pour augmenter la taille de toutes les icônes.

.glyphicon {
    font-size: 50px;
}

Pour cibler une seule icône, 

.glyphicon.glyphicon-globe {
    font-size: 75px;
}
337
VenomVendor

Fontawesome a une solution parfaite à cela.

J'ai mis en place le même. juste sur votre fichier principal .css ajouter ceci

.gi-2x{font-size: 2em;}
.gi-3x{font-size: 3em;}
.gi-4x{font-size: 4em;}
.gi-5x{font-size: 5em;}

Dans votre exemple, il vous suffit de le faire.

<div class = "jumbotron">
    <span class="glyphicon glyphicon-globe gi-5x"></span>
</div>
136
Mr. Crowley

Si vous utilisez bootstrap et font-awesome, il est facile, inutile d'écrire une seule ligne de nouveau code, ajoutez simplement fa-Nx, aussi gros que vous voulez, Voir la démo

<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-globe fa-lg"></span>
<span class="glyphicon glyphicon-globe fa-2x"></span>
<span class="glyphicon glyphicon-globe fa-3x"></span>
<span class="glyphicon glyphicon-globe fa-4x"></span>
<span class="glyphicon glyphicon-globe fa-5x"></span>
64
Ali Adravi

Oui, et vous pouvez aussi utiliser le style inline: 

<span style="font-size: 15px" class="glyphicon glyphicon-cog"></span>
14
Terje Solem

essayez d'utiliser l'en-tête, pas besoin de css supplémentaire

<h1 class="glyphicon glyphicon-plus"></h1>
11
Bagus Cahyono

Par exemple, ajouter la classe: 

btn-lg - GRAND

btn-sm - SMALL 

btn-xs - Très petit

<button type=button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default">
<span class="glyphicon glyphicon-star" aria-hidden=true></span>Star
</button>

 <button type=button class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button> 

<button type=button class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-star" aria-hidden=true></span> Star
</button>

Lien de référence Bootstrap: Glyphicons Bootstrap

9
OpenWebWar

J'ai utilisé des classes d'en-tête d'amorçage ("h1", "h2", etc.) pour cela. De cette façon, vous obtenez tous les avantages en termes de style sans utiliser les tags réels. Voici un exemple:

<div class="h3"><span class="glyphicon glyphicon-tags" aria-hidden="true"></span></div>

0
Alex Kozlov