–
[Mise à Jour 2018]
Je fais une petite mise à jour de cette page, si vous vous en servez, sachez que c’était l’un de mes tout premiers projets. Il ne vole pas bien haut, même moi je ne m’en sert plus, j’ai remplacé par ForkAwesome (alternative à FontAwesome).
#ff0000;">/!\ Notez que les Glyphicons ne sont plus supportés depuis la V4 de Bootstrap.
Un Kit PHP pour Bootstrap
Si vous développez des sites en utilisant Bootstrap, vous devez vous aussi en avoir marre de taper quinze fois la même chose pour rien…
Lorsque vous créez votre site et que vous y incluez un Glyphicon quelque part, quelle galère !
<span class="glyphicon glyphicon-asterisk"></span>
Juste pour afficher un petit icone…
Et puis, pour la maintenance, si vous voulez remplacer un lot d’icone par un autre… Je vous laisse imaginer ?
Et bien fini les galères, grâce au PHPGlyphsKit mesdames messieurs (ça fait un peu vendeur de produit ménagers super dégraissant sur les marchés non ?)
Bref, comment ça marche ?
Il faut avoir Bootstrap d’inclus sur votre site, puis incluez PHPGlyphsKit.php.
Pour l’utiliser c’est simple, là où vous avez besoin d’inclure un Glyphicon avec les balises
<span></span>
mettez par exemple pour un petit nuage :
<?=$SGLcloud?>
Cette variable écrira :
<span class="glyphicon glyphicon-cloud"></span>
Si vous voulez inclure le Glyphicon dans une balise <span>
ou une quelconque class
qui contient déjà des arguments, faites la même chose sans le « S »
<?=$GLcloud?>
Cette variable écrira :
glyphicon glyphicon-cloud
C’est simple, non ?
Comment marchent les noms ?
Ils sont constitués de « GL » comme Glyphicon, et d’un « S » en tête pour inclure la balise <span></span>
le « S » tout comme le « GL » sont en majuscule. La suite, en minuscule.
Les noms des Glyphicons sont les mêmes que sur le site de Bootstrap.
glyphicon glyphicon-asterisk
= GLasterisk
<span class="glyphicon glyphicon-asterisk"></span>
= SGLasterisk
glyphicon glyphicon-plus
= GLplus
<span class="glyphicon glyphicon-plus"></span>
= SGLplus
glyphicon glyphicon-euro
= GLeuro
<span class="glyphicon glyphicon-euro"></span>
= SGLeuro
glyphicon glyphicon-minus
= GLminus
<span class="glyphicon glyphicon-minus"></span>
= SGLminus
etc…
Une petite exception, lorsqu’il s’agit de noms composés, par exemple :
glyphicon glyphicon-download-alt
Il suffit de coller tous les mots :
GLdownloadalt
Pour télécharger le kit au format .ZIP c’est ici
Besoin d’info ? Vous l’avez amélioré ? Dites-le !