---
title: "How to add calendar icons to the date picker fields?"
canonical: "https://maestrel-resource-center.refined.site/space/KB/53609300/How%20to%20add%20calendar%20icons%20to%20the%20date%20picker%20fields%3F"
format: markdown
---
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](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)

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