[Resolved] Square added to the left of icons when selecting SVG in General settings

[David]

Hello!

There are several threads on square SVG logos but my problem seems to be slightly different.

When I set icons to SVG as per https://docs.generatepress.com/article/svg-icons/, I see a noticeable speed boost. However, a square is added to the left of the search icon (Also to the left of the menu icon on small displays).

Example: https://socialpronow.com/blog/learn-how-to-be-more-outgoing/

When I disable Litespeed, the problem goes away. But no matter how many cache clearings I do the problem persists. So while I understand that it might be a Litespeed issue, I’m checking here to see if there’s a workaround? Ie, is there a way I can delete these squares?

Thank you,
David

[Ying]

Hi David,

You could give this CSS a try:

.search-item a:before {
    display: none;
}

Let me know 🙂

[Leo]

Ying’s CSS would work but I would recommend checking with LiteSpeed’s support team if you can solve the root of the problem instead of using a CSS fix.

It must be some sort of caching issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Hello, I talked to the Litespeed support and it turns out that the square disappears when we disable Load CS Asynchronously. Is there a workaround to keep it working with Async on?

Related to this, Console still complains about the font file:

The resource https://socialpronow.com/wp-content/plugins/gp-premium/general/icons/gp-premium.ttf was preloaded using link preload but not used within a few seconds from the window’s load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

(Note, it’s set to SVG in the Customizer -> General settings)

This warning shows also when Litespeed is deactivated.

[Leo]

it turns out that the square disappears when we disable Load CS Asynchronously. Is there a workaround to keep it working with Async on?

I’m not sure unfortunately. If the caching is properly cleared, then the font should not load at all.

This option has been available for a long time now and I can’t recall other mentions of this.

The gp-premium.ttf should not be loading at all either when SVG icon is selected.

I feel like something is still holding on to the cache in your case.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[David]

Hello,

Ok, so I tried to simply hide the square using Yings CSS.

.search-item a:before {
    display: none;
}

It hides the menu on mobile viewports but still has the squares on desktop. I tried hiding different classes but didn’t get it to work. Which classes should I target?

https://dev.socialpronow.com

[Ying]

Hi David,

It’s not working on desktop because it’s been added under a media query.

You are missing a }in your CSS where the red arrow indicates.
https://www.screencast.com/t/Y5n0ae0L5zbu

Let me know 🙂

[David]

Ah, that’s embarrassing. Thank you!

Was one square left, this code worked for me in case anyone else would run into the same issue:

.menu-toggle:before, .search-item a:before {
 display: none;
}

[Ying]

Haha no problem, everybody makes mistakes 🙂
Glad it works now!

[Author]

Posts