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>

— CoderBryan
source

Copie

— Kevin Workman

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

11

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

<h1 class="glyphicon glyphicon-plus"></h1>

— Bagus Cahyono
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
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
source