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

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

Home Forums Support Square added to the left of icons when selecting SVG in General settings

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1639796
    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

    #1639821
    Ying
    Staff
    Customer Support

    Hi David,

    You could give this CSS a try:

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

    Let me know πŸ™‚

    #1639830
    Leo
    Staff
    Customer Support

    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.

    #1641673
    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.

    #1642294
    Leo
    Staff
    Customer Support

    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.

    #1644421
    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

    #1644566
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1644733
    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;
    }
    #1644771
    Ying
    Staff
    Customer Support

    Haha no problem, everybody makes mistakes πŸ™‚
    Glad it works now!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.