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 :

jeu icones gratuites
<i class="glyphicon glyphicon-new-window blue"></i>
glyphicon new window

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 :

glyphicon transparent

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.

A lire aussi
Luminar 3, le logiciel de retouche photo, devient gratuit

Laisser un commentaire