Archived topic
Flickering sidebar and topbar
14 replies · Started by Halil on September 26, 2018
Hi,
I am having heavy flickering problem with my site on chrome and edge (edge is lesser flickering)
I have attached a video link.
I tried to disable almost all of the plugins, tried on 2 different laptops, same result.
https://www.youtube.com/watch?v=6oDvQsecptk
What can be the reason?
Hi there,
This is happening because of your icons.
You're loading Font Awesome in the footer, which means your page loads before the icons load.
If you load Font Awesome in the <head> instead, the flicker will go away.
Thanks for help Tom, but could u pls describe what to do to load font awesome in the head? I really dont know how to do it and it is beyond my knowledge, that's all started after changing setting in gp regarding font awesome.
I tried severa methods but couldnt achieve it.
How are you adding Font Awesome? Function or plugin?
I am not using any plugin for font. While ago, I have changed the setting in GP to use minimal fontawesome, after that change in settings it's gone and fontawesome is now being provided thru bootstrapcdn.
In the functions.php I see nothing regarding fontawesome. What should I do?
and if posible I'd like to serve it from my own web server, cause I am already using another cdn.
How is it being served through bootstrap cdn? There must be a function or plugin added to your site which is adding it. We need to find out how it's being added so we can adjust those settings to load it in the <head>.
Well I really dont know, after changing the settings for fontawesome in GP it started serving thru bootstrapcdn?
Never seen that before.
And I couldnt see any code referencing bootstrap cdn in the functions.php.
Would u like to have a look at it? I can add you as admin?
I think I found out which plugin it is.
I have disabled it.
What should I wrote to functions.php to enable load fontawesome in the head?
This might help: https://docs.generatepress.com/article/font-awesome/
although it seems easy to edit, I couldnt achieved that. Here is the code that plugins load fontawesome from local server. I have loaded all the fonts into my theme/fonts folder and css to theme/css. It now loads font awesome locally. How can I edit this code to load it in the head?
add_action( 'su/assets/register', function() {
wp_deregister_style( 'font-awesome' );
wp_register_style( 'font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.min.css', array(), '4.7.0', 'all' );
} );Tom,
with the following code, I have loaded font awesome and hopefully it loads in the head? Header stopped flickering but sidebar still flickers.
add_action( 'su/assets/register', function() {
wp_deregister_style( 'font-awesome' );
} );
add_action( 'wp_enqueue_scripts', function() {
wp_register_style( 'font-awesome', get_stylesheet_directory_uri() . '/css/font-awesome.min.css', array(), '4.7.0', 'all' );
wp_enqueue_style( 'font-awesome' );
} );
It looks much better to me now. There will always be a small "flash" as the icons load, which is the same with any custom font (icon or text).
Without doing a hard refresh, the icons don't flash at all for me anymore :)
thanks.
No problem :)
