Comment agrandir les glyphiques? (Changer la taille?)

239

Je voudrais agrandir le glyphicon du globe pour qu'il couvre 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>
html css twitter-bootstrap glyphicons CoderBryan
la source
Copie
Kevin Workman

Réponses:

367

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

.glyphicon {
    font-size: 50px;
}

Pour cibler une seule icône, 

.glyphicon.glyphicon-globe {
    font-size: 75px;
}
VenomVendor
la source
2
Ça a marché! (Je l'accepterai dans 5 minutes (c'est le temps qui reste)) Y a-t-il un moyen de le centrer? @VenomVendor
CoderBryan
2
text-centersur la div.
Aibrean
7
pour agrandir le glyphicon "à la demande", utilisez .glyphicon.larger {font-size: 150%; }
user216661
Qu'en est-il de l'amincir?
Nofel
J'ai dû ajouter !important;à la taille de la police pour remplacer le CSS boostrap.
WhileInHell
143

Fontawesome a une solution parfaite à cela.

J'ai implémenté la même chose. juste sur votre fichier .css principal ajoutez 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>
M. Crowley
la source
Agréable! Vous pouvez également utiliser des quantités fractionnaires comme 1,5em.
Mike Taverne
Beaucoup mieux que la réponse acceptée et montre une solution générique à un problème récurrent.
Adam
71

Si vous utilisez bootstrap et font-awesome alors c'est facile, pas besoin 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>
Ali Adravi
la source
Glyphicons et Font-Awesome unissent leurs forces!
Timo
Je ne suis pas en faveur de combiner FA et Glyphicons. Voir la réponse ci-dessous sur la façon de faire évoluer le glyphicon en utilisant le style en ligne ou via une classe css ci-dessus. Ou pour une utilisation pure de solution FA -> fa fa-globe fa-2x (v4.x)
MarcoZen
MarcoZen: de toute façon, par la prochaine version de bootstrap 4, les glyphicons vont être supprimés, beaucoup d'entre nous utilisaient auparavant ensemble.
Ali Adravi
17

Oui, et vous pouvez également utiliser le style en ligne: 

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

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

<h1 class="glyphicon glyphicon-plus"></h1>
Bagus Cahyono
la source
2
Vous pouvez le faire, mais cela ne vous donne pas un bon niveau de contrôle comme le ferait un peu de CSS.
MattD
6
L'utilisation d'en-têtes en raison de leur effet sur la taille de la police est un anti-modèle. Un utilisateur naviguant sur votre site au clavier serait envoyé directement à votre icône car le lecteur d'écran suppose qu'il signifie un titre / en-tête pour le contenu le plus important de la page.
Roy
9

Par exemple, ajoutez une classe:

btn-lg - GRAND

btn-sm - PETIT

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

OpenWebWar
la source
7
La question considérait les images, pas les images comme des boutons.
user216661
0

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

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

Alex Kozlov
la source