If you’d like to customize or replace icons in the mobile menu (e.g., Mobile Menu Icon, My Reservations, or My Bookings), follow the steps below using the WP Rentals Child Theme and custom css.

This is an example for how to add a different icon. You can choose your icon code as you wish

i.fas.fa-cogs {
margin: 25px 0px;
}

.mobile-trigger-user:before {
content: "\f007";
font: normal normal normal 14px/1 FontAwesome;
font-size: 30px;
}

.fa-cogs:before{
display:none;
}

 

To change icons for My reservation:

.fa-folder-open:before {
content: "\f236" !important; /* Folder Icon */
}

 

To change the icons for My bookings:

i.far.fa-folder-open:before {
content: "\f02e" !important; /* Book Icon */
}

If you prefer to adding the css in child theme:

Help to install child theme https://help.wprentals.org/article/how-to-activate-child-theme/
Add the css in Child theme style.css

If you prefer adding the css as custom css

You can add custom CSS in Theme Options > Design > Custom CSS. The changes you make here will not be overwritten when you update the theme.

To see the CSS changes, you may need to clear cache from WpRentals Cache (if enabled).

If your CSS changes are not showing up, it may be due to incorrect CSS code or browser caching. As an alternative, you can use the WordPress Customizer (a default WordPress feature), which allows you to preview changes immediately and helps bypass cache issues.