Whether you're using 5 Star Hotel for an accommodations website or not, you may wish to change the page loading icon, or remove the loading screen overlay entirely.


The process is relatively simple to change the icon. FontAwesome 4.7 is installed with the child theme, so you may wish to use an icon from this list: https://fontawesome.com/v4.7.0/icons/


In this example, we'll be using the Elegant Themes icons native to Divi. Here's the list of available icons: https://www.elegantthemes.com/blog/resources/elegant-icon-font


Change the Loading Icon:


Follow these steps to change the loading screen icon:


1. Navigate to the Elegant Themes link above. Find an icon you'd like to use, and copy down it's code name. The one used in the demo is pictured below:




2. In the WordPress Dashboard, navigate to Appearance > Editor > style.css > Line 46. You'll notice that the line reads: content: "\e009";


3. Notice how the code is different in the child theme versus Elegant Themes icon page: 


4. When you've chosen an icon you wish to use, change the last four digits on Line 46 after the \. For instance, in the picture above there's a camera icon directly below the house. You would then use: content: "\e00f";


5. Save your settings by clicking the "Update File" button, and Shift+Refresh the front-end to review your new page loading icon.


Remove the Loading Screen Overlay:


Follow these steps to remove the loading screen overlay:


1. In the WordPress Dashboard, navigate to Appearance > Editor > style.css


2. You will notice on Line 21 a description that reads: /* PRE-LOADER - DARK */ - It is the start of the loading animation code.




3. Highlight Lines 21 through Line 72. That is the full loading animation CSS. You can delete this code.


4. Save your settings by clicking the "Update File" button, and Shift+Refresh the front-end to review that the loading screen animation is now gone.


If you have any issues with this solution, please reach out to support.