Bonjour à tous,

J'utilise les librairies Bootstrap et FontAwsome sur une page.
Mon objectif est de créer des badges différents pour représenter des formats de fichiers, en fonction de leur extensions (mes données sont dans une BDD PostGreSQL).
Voici un JSFiddle pour vous montrer où j'en suis : http://jsfiddle.net/1yq53tvg/


Voici mon CSS :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
          /* Format Vecteurs */
          .format-SHP, .format-KML, .format-GEOJSON {background-color: DarkCyan;}
          /* Format Rasters */
          .format-JPG, .format-TIF, .format-BMP {background-color: DarkMagenta;}
          /* Format BDD */
          .format-MDB, .format-ACCDB, .format-SQLITE {background-color: Blue;}
          /* Format Tableurs */
          .format-XLSX, .format-XLS, .format-CSV, .format-ODT {background-color: Black;}
Et voici l'HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<span class="badge format-SHP"><i class="fa fa-map-marker"></i>&nbsp;&nbsp;SHP</span>
<span class="badge format-JPG"><i class="fa fa-image"></i>&nbsp;&nbsp;JPG</span>
<span class="badge format-MDB"><i class="fa fa-database"></i>&nbsp;&nbsp;MDB</span>
<span class="badge format-XLS"><i class="fa fa-table"></i>&nbsp;&nbsp;XLS</span>

J'aimerais, si possible, ne pas avoir à préciser la classe de l'icone dans le badge, qui dépend en fait de la classe du badge.
Mais je ne sais pas comment définir pour le badge une classe d'icone spécifique ?
(je sais pas si je suis clair... )
En fait, j'aimerais juste écrire ceci en HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<span class="badge format-SHP"><i></i>&nbsp;&nbsp;SHP</span>
<span class="badge format-JPG"><i></i>&nbsp;&nbsp;JPG</span>
<span class="badge format-MDB"><i></i>&nbsp;&nbsp;MDB</span>
<span class="badge format-XLS"><i></i>&nbsp;&nbsp;XLS</span>

Ou bien comme ceci, ça me va aussi :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<span class="badge format-SHP"><i class="fa format-SHP"></i>&nbsp;&nbsp;SHP</span>
<span class="badge format-JPG"><i class="fa format-JPG"></i>&nbsp;&nbsp;JPG</span>
<span class="badge format-MDB"><i class="fa format-MDB"></i>&nbsp;&nbsp;MDB</span>
<span class="badge format-XLS"><i class="fa format-XLS"></i>&nbsp;&nbsp;XLS</span>
(en précisant dans la classe CSS la classe d'icone FA)

Est-ce que c'est possible ?

Merci à vous !