fa-chevron-up displays in grey before website loads

[Jo-S]

Hi Guys

Our website uses Skyline theme and before it loads, it always displays some grey lettering that includes fa-chevron-up.

Any clues as to how we can stop that from happening before the actual website displays?

https://www.lollipoplocal.co.uk

[DaniellePeters · Accepted solution]

There is JavasScript that grabs the short code [fa-chevron-up] and changes it to be 

<i class="fa fa-chevron-up"></i> so that the Font Awesome icon renders. The issue here is that the load time is relatively long, so you briefly see the shortcode before the icon is rendered. The fix here would be to go into the Custom HTML module labeled Back to Top in the global group called Skyline Footer and update the code from

<a href="#">[fa icon="chevron-up"]</a>

to

<a href="#"><i class="fa fa-chevron-up"></i></a>

For future reference, it appears that the current version of the Skyline theme has been updated with this same fix.

[Jo-S]

Many thanks @DaniellePeters - this worked a treat. For anyone else REMEMBER to apply the fix to ALL clones of your footer. That had us cussing for a while 😮

As an aside, if there are updates to the main Skyline theme, is there a way to apply these to our old css without breaking our existing site?

[kejoff]

You should have a look at your CSS and in particular the .fa-chevron-up class to remove it.

[Jo-S]

Thanks @kejoff - See @DaniellePeters solution as that worked for us.