select font awesome

Comment créer une liste déroulante d’icone Font Awesome ?

/ Programmation web, Dossiers

L’utilisation des icônes est essentielle pour améliorer l’UX d’un site web. Font Awesome propose une large gamme d’icônes personnalisables.

Dans cet article, nous allons voir comment créer un champ <select> permettant de choisir une icône Font Awesome en affichant à la fois son nom et son visuel.

1. Intégration de Font Awesome

Avant de commencer, assurez-vous que Font Awesome est bien inclus dans votre projet. Vous pouvez l’ajouter via un CDN :

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

2. Création du Select avec les icônes

Voici le code HTML de base :

<select id="icon-select" class="form-awesome">
    <option value="fa-solid fa-user"> &#xf007; User</option>
    <option value="fa-solid fa-envelope"> &#xf0e0; Envelope</option>
    <option value="fa-solid fa-bell"> &#xf0f3; Bell</option>
    <option value="fa-solid fa-star"> &#xf005; Star</option>
    <option value="fa-solid fa-heart"> &#xf004; Heart</option>
</select>

3. Ajout de la mise en forme CSS

Ajoutons un peu de style pour améliorer l’affichage :

.form-awesome {
    font-family: "Font Awesome 6 Free";
}

4. Trouver les Codes des Icônes Font Awesome

Pour obtenir le code Unicode d’une icône Font Awesome, vous pouvez visiter le site officiel Font Awesome et rechercher une icône. Une fois sur la page de l’icône souhaitée, cliquez sur l’onglet « Glyph » pour voir son code Unicode (par exemple, &#xf0f3; pour l’icône de cloche). Ce code peut ensuite être utilisé dans votre <select> pour afficher l’icône.

 

Articles similaires