3.4 Icônes FontAwesome dans une balise <select>

Dans cet article, je vais vous montrer comment afficher des icônes FontAwesome dans une balise <select>.

Par définition, il n'est pas possible d'ajouter des balises HTML à l'intérieur des options d'un <select>. Une balise <option> ne peut avoir aucun enfant.

Il n'est donc pas possible de créer une liste déroulante qui utilise les icône FontAwesome comme suit :

Il existe pourtant une technique pour y arriver.

Il faut se rappeler que FontAwesome est une police de caractères. Elle utilise les plages pour usage privé de Unicode (Unicode private use area) pour définir ses icônes.

Si on configure la liste déroulante pour qu'elle utilise cette police, on pourra afficher l'icône désiré sans passer par la balise <i> qui est interdite dans les <option>.

Voici les étapes pour y arriver.

• D'abord, assurez-vous que FontAwesome soit bien ajouté dans votre projet. 

  Si ce n'est pas le cas, vous pouvez l'ajouter à l'aide d'une balise <link> qui va chercher la police par CDN.

  HTML

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />

  Si vous préférez, vous pouvez utiliser une autre technique présentée sur le site de FontAwesome : https://fontawesome.com/start.

• Vous devez trouver le nom exact de la police à utiliser, selon la version de FontAwesome installée.

  Parmi les fichiers de FontAwesome, recherchez un texte qui parlera de font-family.

  Si vous utilisez le lien CDN présenté plus haut, ouvrez-le dans un navigateur. Vous y trouverez ceci :

  CSS

  @font-face{font-family:"Font Awesome 5 Free";
  ...
  @font-face{font-family:"Font Awesome 5 Brands";

  Dans une autre installation, j'ai trouvé ceci dans le fichier fa-regular-400.svg :

  Fichier fa-regular-400.svg

  <font-face font-family="Font Awesome 5 Free"
     ...  />

  et ceci dans le fichier fa-brands-400.svg :

  Fichier fa-regular-400.svg

  <font-face font-family="Font Awesome 5 Brands"
     ...  />

• Dans votre feuille de style, créez une classe CSS qui utilise la ou les polices trouvées.

  Précisez les noms de polices trouvés plus tôt, séparés par une virgule. Et comme toujours, il faut terminer la règle font-family par une police générique, par exemple sans-serif.

  Il faut fournir un poids à la police (font-weight) pour assurer que le maximum d'icônes soient affichés correctement.

  Selon la documentation de FontAwesome¹, les icônes du groupe Solid requièrent un poids de 900. Ceux du groupe Brands requièrent un poids de 400.

  CSS

  .fontawesome {
    font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", sans-serif;
    font-weight: 900;
  }

• Vous devez trouver le code hexadécimal qui correspond au caractère recherché. On l'appelle point de code ou, en anglais, code point.

  Pour y arriver, consultez les icônes disponibles sur le site de FontAwesome. Le point de code est affiché à côté de chaque icône. Il s'agit de 4 caractères hexadécimaux, par exemple f1b9. Sur certaines versions de FontAwesome, ils sont plutôt affichés sous la forme  [&#xf1b9;].

  Voici une autre technique pour trouver le point de code. Affichez une page dans laquelle l'icône apparaît puis inspectez cet icône. Cliquez sur le ::before sous le <i>. Le point de code du caractère est affiché à droite. Il apparaît précédé d'une barre oblique inverse, par exemple \f1b9.

  

• Vous avez en main tout ce qu'il faut pour afficher votre liste déroulante.
  HTML

  <select id="transport" name="transport" class="fontawesome" size="4">
      <option class="fontawesome" value="metro">&#xf239 Métro</option>
      <option class="fontawesome" value="taxi">&#xf1ba Taxi</option>
      <option class="fontawesome" value="voiture">&#xf1b9 Voiture</option>
      <option class="fontawesome" value="velo">&#xf206 Vélo</option>
  </select>

  

  Remarquez que la balise <select> utilise l'attribut size.

  C'est que les navigateurs supportent mal les styles pour les balises <option>. Si la liste apparaît toujours déroulée grâce à l'attribut size, les icône sont visibles.

  Si on retire cet attribut, l'icône sélectionné apparaîtra dans la balise <select> mais lorsque la liste est déroulée, les icônes ne seront pas visibles.

  

  

  Important : puisqu'il n'y a pas de garantie que tous les navigateurs supportent les icônes dans la liste déroulante, il faut absolument les accompagner d'un texte explicatif comme dans cet exemple : Métro, Taxi, Voiture, Vélo.
  
  De toute façon, le texte explicatif est toujours apprécié puisque certains icônes sont peu explicites ou sont difficiles à différencier de d'autres icônes.

Source

1. « Basic Use ». FontAwesome. https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use