Discussion :

[SylvainM]

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 !

[Invité]

bonjour,

la syntaxe <i class="fa fa-....."></i> correspond à Font Awesome v4.
Il existe une cheat sheet pour la v4.

Dans ton cas, on peut mettre les icônes dans le content de span.badge:before
On utilise alors le code Unicode (entre crochet dans la cheat sheet)
ex. : fa-image [&#xf03e;] -> content: "\f03e";/*fa-image*/
Ca donne :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<span class="badge format-SHP">SHP</span>
<span class="badge format-JPG">JPG</span>
<span class="badge format-MDB">MDB</span>
<span class="badge format-XLS">XLS</span>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
          .badge {
            position:relative;
            padding-left:22px;
            min-height:18px;
          }
          .badge:before {
            position:absolute; display:block; top:2px; left:4px;
            width:16px; height:16px; font-size:12px;
            font-family: FontAwesome;
          }
          /* Format Vecteurs */
          .format-SHP, .format-KML, .format-GEOJSON {background-color: DarkCyan;}
          .format-SHP:before, .format-KML:before, .format-GEOJSON:before {
            content: "\f279";/*fa-map*/
          }
          /* Format Rasters */
          .format-JPG, .format-TIF, .format-BMP {background-color: DarkMagenta;}
          .format-JPG:before, .format-TIF:before, .format-BMP:before {
            content: "\f03e";/*fa-image*/
          }
          /* Format BDD */
          .format-MDB, .format-ACCDB, .format-SQLITE {background-color: Blue;}
          .format-MDB:before, .format-ACCDB:before, .format-SQLITE:before {
            content: "\f1c0";/*fa-database*/
          }
          /* Format Tableurs */
          .format-XLSX, .format-XLS, .format-CSV, .format-ODT {background-color: Black;}
          .format-XLSX:before, .format-XLS:before, .format-CSV:before, .format-ODT:before {
            content: "\f0ce";/*fa-table*/
          }

N.B. Font Awesome est passé à la v5.
La syntaxe est différente, et toutes les icones ne sont pas gratuites...

[SylvainM]

Super !!!
Merci à toi jreaux62 : je ne connaissais pas la propriété CSS content !
(à vrai dire, je ne connais pas grand chose en CSS , mais c'est par ce genre de petits pas que je progresse )

Ça va super bien marcher dans mon cas précis, et dans plein d'autres cas qui s'ouvrent à moi !

A+

Sylvain

[Invité]

Je me suis juste trompé sur une icône :
j'ai utilisé "fa-map" au lieu de "fa-map-marker".
Tu corrigeras


N.B. Note le mode d'emploi et les liens que j'ai donnés (pour plus tard...)