Glyphicons plus gros

212

Comment puis-je faire de plus grands glyphiques dans twitter bootstrap 3.0 (pas 2.3.x).

Ce code rendra mes glyphicons gros:

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

Comment puis-je obtenir cette taille sans utiliser la classe btn-lg tout en utilisant uniquement un span?

Cela donne un petit glyphicon:

<span class="glyphicon glyphicon-link"></span>
css twitter-bootstrap twitter-bootstrap-3 glyphicons guiomie
la source

Réponses:

372

Vous pouvez simplement donner au glyphicon une taille de police à votre convenance:

span.glyphicon-link {
    font-size: 1.2em;
}

la source
génial! Dans mon cas, j'avais un groupe d'entrée-btn avec un bouton, et ce bouton était un peu plus gros. J'ai donc donné "taille de police: 95%" pour mon glyphicon et cela a été résolu.
victorf
41

Voici comment je le fais:

<span style="font-size:1.5em;" class="glyphicon glyphicon-th-list"></span>

Cela vous permet de changer de taille à la volée. Fonctionne mieux pour les exigences ad hoc pour changer la taille, plutôt que de changer le CSS et de l'appliquer à tous.

Randy Greencorn
la source
2
En général, les styles en ligne ne sont pas une bonne approche. Si vous avez besoin de styles spécifiques pour certains composants, appliquez simplement la nouvelle taille de police via sa classe parent
Kaloyan Stamatov
Parfois, c'est un cas unique et vous ne pouvez pas être dérangé cependant
Matthew Lock
29

La .btn-lgclasse a le CSS suivant dans Bootstrap 3 ( lien ):

.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}

Si vous appliquez la même chose font-sizeet line-heightà votre étendue ( .glyphicon-linkou une nouvelle création .glyphicons-lgsi vous comptez utiliser cet effet dans plusieurs instances), vous obtiendrez un Glyphicon de la même taille que le gros bouton.

Angélique
la source
4
l'ajout de la btn-lgclasse est une option beaucoup plus facile. Bonne réponse!
Neel
6 

<button class="btn btn-default glyphicon glyphicon-plus fa-2x" type="button">
</button>

<!--fa-2x , fa-3x , fa-4x ... -->
<button class="btn btn-default glyphicon glyphicon-plus fa-3x" type="button">
</button>
Développer l'extrait

barış çıracı
la source
2

Dans mon cas, j'avais un input-group-btnavec un button, et buttonc'était un peu plus grand que son contenant. Je viens donc de donner font-size:95%pour mon glyphicon et il a été résolu.

<div class="input-group">
    <input type="text" class="form-control" id="pesquisarinbox" placeholder="Pesquisar na Caixa de Entrada">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button">
            <span class="glyphicon glyphicon-search" style="font-size:95%;"></span>
        </button>
    </div>  
</div>
victorf
la source
2

Écrivez votre ou <span>dans :<h1><h2>

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>
silencieux
la source
0

Si vous utilisez bootstrap 3, utilisez une balise, comme celle-ci. <small><span class="glyphicon glyphicon-send"></span></small>Cela fonctionne parfaitement pour Bootstrap 3.
Vous pouvez même utiliser plusieurs <small>balises pour définir une taille plus petite.
Code:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

Valynk
la source
C'est exactement l'opposé de la question ... à moins que vous ne remplaciez les styles, cela le rendra petit. Je viens d'utiliser cette balise pour son usage exact l'autre jour.
Richard Barker