CLS Issue with Lightweight Social Icons

Hi there,

You can try 2 things.

You can try to preload its fonts by using this code on a Hook Element hooked to wp_head.

<link rel="preload" href="https://adventuresofmel.com/wp-content/plugins/lightweight-social-icons/fonts/fontello.woff" as="font" type="font/woff2" crossorigin>

or you can prevent FOUT by editing the plugin's CSS file.
https://wordpress.org/support/topic/preload-font-fontello-woff/#post-14092979

Hey, I tried what you suggested and the CLS issues still remain. If I remove the plugin they still all go away.

Hi there,

try adding this CSS to your site:

.lsi-social-icons {
  min-height: 52px;
}

It should preset the height of the container so it doesn't rely on the loading of the icons to define its height.

Thanks! That solved 99% of the issues, there is still some very small issue with each of the icons not. But it's negligible.

Try updating the CSS to this:

.lsi-social-icons {
  min-height: 52px;
}
.lsi-social-icons li {
  min-height: 40px;
}

Hey, this actually worked perfectly this time, Thank You!

Glad to hear that!

I need to apply the same fix but I don't know where or how to add something to the CSS. Can you show me where I add this? Thanks

Hi there,

that code may need to differ for your particular site.
But you can give it a try.

This doc explains some methods for adding CSS:

https://docs.generatepress.com/article/adding-php/

But the simplest method is to copy the code provided here:
https://generatepress.com/forums/topic/cls-issue-with-lightweight-social-icons/#post-1708130

Go to Customizer > Additional CSS in the field, start a new line and paste the code in there.