How to add calendar icons to the date picker fields?

This can be done only if you have Font Awesome library loaded by your theme or a plugin. If this is not the case, you will have to modify the file functions.php of your child theme and add code to load Font Awesome stylesheet.

Step 1 - Check if you have Font Awesome library loaded and which version you are running.

You can simply view the source file and check if you find “font-awesome” id in the CSS stylesheets that are loaded. Take note of the version number.

If you are using Elementor, check that you have enabled support to Font Awesome.

Step 2 - Add CSS

You will add the following CSS in HBook > Appearance > Custom CSS for front-end.

Resources

• Version 6 : https://docs.fontawesome.com/web/add-icons/pseudo-elements

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

With Font-Awesome 5

.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;
}