web-dev-qa-db-fra.com

Plus gros glyphiques

Comment créer de plus gros glyphiques sur Twitter bootstrap 3.0 (pas 2.3.x).

Ce code fera mes gros glyphicons:

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

Comment puis-je obtenir cette taille sans en utilisant la classe btn-lg en utilisant seulement une étendue?

Cela donne un petit glyphicon:

<span class="glyphicon glyphicon-link"></span>
csstwitter-bootstraptwitter-bootstrap-3glyphicons
212
guiomie

Vous pouvez simplement donner au glyphicon une taille de police à votre goût:

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

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 lorsque les besoins ad hoc changent de taille, plutôt que de modifier le css et de l’appliquer à tous.

41
Randy Greencorn

La classe .btn-lg a les CSS suivants dans Bootstrap 3 ( link ):

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

Si vous appliquez les mêmes font-size et line-height à votre plage (soit .glyphicon-link, soit un .glyphicons-lg nouvellement créé, si vous allez utiliser cet effet à plusieurs reprises) , vous obtiendrez un glyphicon de la même taille que le gros bouton.

29
Angelique
<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>
6
barış çıracı

Ecrivez votre <span> dans <h1> ou <h2>:

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

Dans mon cas, j'avais un input-group-btn avec un button, et ce button était un peu plus grand que son conteneur. Je viens donc de donner font-size:95% pour mon glyphicon et le problème est 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>
2
victorf

Si vous utilisez bootstrap 3, utilisez la balise, comme ceci <small><span class="glyphicon glyphicon-send"></span></small> Il fonctionne parfaitement pour Bootstrap 3.
Vous pouvez même utiliser plusieurs balises <small> pour réduire la taille.
Code:
<small><small><span class="glyphicon glyphicon-send"></span></small></small>

0
Valynk