Utilisation des glyphicon en tant que puce dans une liste

2016-12-19

web Hadock 2016-12-19

Il existe un moyen plutôt simple d'utilisé les glyphicon de boostrap dans une liste à puce

gly4     gly5

 

Tout d'abord il faut récupérer le code Css du glyphicon; pour cela il suffit de se rendre ici, d'appuyer sur f12 pour afficher l'onglet "Règles".

gly1

Avec l'inspecteur sélectionner le glyphicon que vous souhaitez utiliser puis récupérer le code dans "Pseudo-éléments".

  gly2  gly3

Ensuite il suffit de taper le code suivant dans le Css (ici la classe "perso" est utilisée pour éviter de toucher à toutes les listes!) :

li.perso {
    display: block;
}

li.perso:before {
    content: "e013";
    font-family: 'Glyphicons Halflings';
    font-size: 12px;
    float: left;
    margin-top: 0;
    margin-left: -17px;
    color: #90e590;
}

Il vous suffira d'utiliser les propriétés de l'élément pour le placer du mieux que vous le souhaitez (ici j'ai, par exemple, supprimer la marge en haut et changer la couleur.)