Comment réduire la taille de la glyphicon dans boostrap

Question

J'utilise une icône glyphicon et il est utilisé dans un bouton. Mais la taille de l'icône est trop grande pour le bouton. Comment puis-je réduire la taille du glyphicon? J'ai déjà utilisé une petite étiquette et ça n'a pas fonctionné.

Answer 1

Vous pouvez utiliser le format de style en ligne pour ajuster la taille de police pour des éléments spécifiques glyphicon

<button> 
     <span style="font-size:12px" class="glyphicon glyphicon-search"></span> Search 
    </button> 

Answer 2

Pour tous les glyphicon vous pouvez essayer comme ci-dessous:

.glyphicon { 
    font-size: 12px; 
} 

Pour une icône spécifique:

.glyphicon.glyphicon-plus { 
    font-size: 12px; 
} 

espère que ce sera utile.

Answer 3

Ce serait votre application normale du glyphicon:

<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 

Vous pouvez tout simplement donner à tous glyphicons une nouvelle taille avec:

.glyphicon { 
    font-size: 12px 
} 

ou vous pourriez donner la durée d'un ID:

<span class="glyphicon glyphicon-search" aria-hidden="true" id="small_glyphicon"></span> 

et de changer la taille pour le ID:

#small_glyphicon { 
    font-size: 12px; /* or lower */ 
} 

Answer 4

Glyphicons sont essentiellement des polices. Ainsi, vous pouvez spécifier la taille souhaitée via la propriété font-size.

J'ai tendance à garder ces quatre classes glyphicon-lg, -md, -sm et -xs dans mes projets, car ils travaillent généralement bien avec btn-lg, -md, -sm et -xs.

.glyphicon-lg { 
 
    font-size: 18px; 
 
} 
 

 
.glyphicon-md { 
 
    font-size: 14px; 
 
} 
 

 
.glyphicon-sm { 
 
    font-size: 12px; 
 
} 
 

 
.glyphicon-xs { 
 
    font-size: 10px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="glyphicon glyphicon-lg glyphicon-asterisk"></div> 
 
<div class="glyphicon glyphicon-md glyphicon-asterisk"></div> 
 
<div class="glyphicon glyphicon-sm glyphicon-asterisk"></div> 
 
<div class="glyphicon glyphicon-xs glyphicon-asterisk"></div>

Answer 5

Identique à changer la taille de la police (ou de style pour cette matière). Utilisez style = "font-size: 12px;"

Vous pouvez utiliser le format de style en ligne, par ex.

<button type="button" class="btn btn-default" aria-label="Left Align"> 
    <span class="glyphicon glyphicon-align-left" aria-hidden="true" style= 
    "font-size: 12px;"></span> 
</button> 

ou dans votre fichier CSS personnalisé par exemple

.glyphicon{ 
    font-size: 12px; 
     }