Archived topic
SVG search icon display issue
3 replies · Started by paddyd on May 12, 2022
Posting this because it may help others encountering the same issue.
Rebuilding yet another Thesis site in GeneratePress and as luck would have it - the SVG search icon issue appeared.
I'd looked at the various posts re: the square appearing before the Search icon in the navigation when SVG icons are enabled, and all seem to just provide a CSS fix, rather than get at the root of the issue - whatever that may be.
So, as per the suggestions, I turned off and cleaned out EVERY cache associated with this version of the site, and yet, the problem persisted, as others have reported. I turned off all the plugins other than GPP and GB and it turns out to be HollerBox causing the issue. But when I add in the custom CSS that Ying provided in another thread, it didn't fix the issue. (https://generatepress.com/forums/topic/square-added-to-the-left-of-icons-when-selecting-svg-in-general-settings/)
So examined the code and this CSS does fix it:
.gp-icon:before, icon-search:before {display:none;}
Figure this may be useful for others encountering this issue.
However, I did want to figure out what the heck Hollerbox is doing that results in this, so I looked through Hollerbox's CSS. And voila - here it is:
.icon-search:before { content: '\e800'; } /* '' */
(how it managed to turn that into a Chinese character in Firefox is another question - not one I'll bother pursuing...)
So - one of life's little mysteries solved. What's peculiar about this is that Hollerbox doesn't HAVE a search function as far as I know.
The site in question is https://knowlesplumbing.com/test1 - I do have other questions for another thread. ;)
Hi there,
Thanks for sharing this.
Just checked your site, it doesn't seem your search icon has the :beforeissue, so you should not need this CSS:.icon-search:before { content: '\e800'; } /* ''*/
Maybe I missed something, let me know if I did :)
Hi Ying - it's not in the GP search icon, but the Hollerbox plugin CSS references the same class - .icon-search - and adds the :before pseudo-element* CSS and since the plugin CSS loads after the GP CSS, it was adding that to the GP CSS. Once I added the display:none for that particular selector, it went away. It certainly didn't go away without that - unless I disabled the Hollerbox plugin. BTW - don't need to have the "gp-icon:before" class in there - I took it out and it still works. So the correct CSS to solve this particular issue is simply:
.icon-search:before {display:none;}
*I suppose if we're being absolutely correct here, there should be two colons (CSS3) rather than just one (CSS2). ;)
Ah I see, thanks for explaining this :)
