[Resolved] CLS Issue with Lightweight Social Icons

[Dan]

Hello, on this site, https://adventuresofmel.com/ I am using lightweight social icons, it is the only source of CLS issues for this site. Is there a way to implement the social icons in the widget areas without using the plugin as it seems it’s been abandoned? I just need simple icons like the plugin provides that doesn’t kill the site with CLS issues.
Thanks

[Elvin]

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

[Dan]

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

[David]

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.

[Dan]

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

[David]

Try updating the CSS to this:

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

[Dan]

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

[David]

Glad to hear that!

[Melanie]

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

[David]

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.

[Author]

Posts