Les icônes fournies par défaut avec le framework Bootstrap peuvent être colorisées facilement en jouant un peu avec le CSS.
Par exemple, pour colorer en bleu, il suffit de déclarer dans le CSS :
.blue {
color: #0099CC;
}et d’ajouter la simple mention blue dans la description de la glyphicon comme ceci :
<i class="glyphicon glyphicon-new-window blue"></i>
Ce qui donne ->
En poussant l’exemple plus loin, on peut vouloir, dans un tableau à alternance de couleur de lignes, ne pas afficher la glyphicon mais réserver l’espace pour éviter un décalage afin d’obtenir ceci :
Pour réaliser cela, il faut appeler la glyphicon-none
<i class="glyphicon glyphicon-none"></i>
et lui appliquer un style transparent :
.glyphicon-none:before {
content: "\2122";
color: transparent !important;
}La mention color : transparent !important; suffit en soi mais pour faire plus propre \2122 permet de réserver l’espace et d’aligner le texte convenablement.
