# ¿Cómo añadir iconos de calendario a los campos del selector de fechas?

Esto solo se puede hacer si tiene la biblioteca Font Awesome cargada por su tema o un plugin. Si no es el caso, tendrá que modificar el archivo functions.php de su tema hijo y añadir código para cargar la hoja de estilos Font Awesome.

<a id="paso-1-compruebe-si-tiene-cargada-la-biblioteca-font-awesome-y-qué-versión-está-ejecutando"></a>

## Paso 1 - Compruebe si tiene cargada la biblioteca Font Awesome y qué versión está ejecutando.

Puede simplemente ver el archivo fuente y comprobar si encuentra el id "font-awesome" en las hojas de estilo CSS que se cargan. Tome nota del número de versión.

Si usa Elementor, comprueba que tiene habilitado el soporte para Font Awesome.

<a id="paso-2-añadir-css"></a>

## Paso 2 - Añadir CSS

Deberá añadir el siguiente CSS en **HBook > Apariencia > CSS personalizados para las páginas del front end**.

<a id="recursos"></a>

## Recursos

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

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

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