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>

— guiomie
source

372

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

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

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

2

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

<h1> <span class="glyphicon glyphicon-th-list"></span></h1>

— silencieux
source

0

Si vous utilisez bootstrap 3, utilisez une balise, comme celle-ci. Cela fonctionne parfaitement pour Bootstrap 3.
Vous pouvez même utiliser plusieurs balises pour définir une taille plus petite.
Code:


— Valynk
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