Comment ajouter des icônes de calendrier aux champs de sélection de la date ?

Cela n'est possible que si la bibliothèque Font Awesome est chargée par votre thème ou par un plugin. Si ce n'est pas le cas, vous devrez modifier le fichier functions.php de votre thème enfant et ajouter du code pour charger la feuille de style Font Awesome.

Étape 1 - Vérifiez si vous avez chargé la bibliothèque Font Awesome et quelle version vous utilisez.

Vous pouvez simplement consulter le fichier source et vérifier si vous trouvez l'identifiant "font-awesome" dans les feuilles de style CSS qui sont chargées. Prenez note du numéro de version.

Si vous utilisez Elementor, vérifiez que vous avez activé la prise en charge de Font Awesome.

Étape 2 - Ajouter le CSS

Vous ajouterez la feuille de style CSS suivante dans HBook > Apparence > CSS personnalisés pour les pages côté-client.

Ressources

Version 6 : https://docs.fontawesome.com/web/add-icons/pseudo-elements
Version 5 : https://docs.fontawesome.com/v5/web/advanced/css-pseudo-elements

Avec Font-Awesome 5

CODE

.hb-datepick-check-in-out-trigger::before {
  content: "\f073";
  font-family: "Font Awesome 5 Free"; 
  font-weight: 900; 
}

span.hb-datepick-check-in-out-trigger {
  bottom: 10px;
  right: 20px;
}