# 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.

<a id="step-1-check-if-you-have-font-awesome-library-loaded-and-which-version-you-are-running"></a>

## 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.

<a id="step-2-add-css"></a>

## Step 2 - Add CSS

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

<a id="resources"></a>

## Resources

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

<a id="with-font-awesome-5"></a>

### 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;
}
```