Square is showing instead of search icon in homepage

Hello,

Have you disabled the simple line icons file from the Theme panel > scripts & styles section? Also, follow the documentation link – https://docs.oceanwp.org/article/637-icons-missing-after-font-awesome-5-upgrade

I didn’t disable the simple line icons. Square is only showing on the homepage instead of the search icon. Homepage is made on Elementor but header is theme default.

The search icon is using the Simple Line icons. If it doesn’t display it means there is a plugin conflict. Try to disable/enable the plugin to check for a possible conflict.

Hi im also having this problem. Day before the icon was perfectly displaying on all pages but today search icon is not showing and insteard square box is showing. Don’t know how to fix it. Please help.

Hello

I am also having same issue. Only home page icons like search Icon and footer icons like contact, mail icons become square. Else on every page they are perfectly ok. I do not know the issue. Please help

Yes exactly same issue is mine. Homepage icons are missing. I have tried many solutions related to this but it remains unsolved. Other pages are fine but only homepage is having this problem. Don’t know what is the root cause. But one thing is sure it is conflict of elemonator with FontAwesome

The exact same thing was also happening to me also. I found out that it was problem with the icon-class. In my contact info footer “icon-envelope” was showing as square in the homepage. But after I replaced “icon-envelope” with font awesome 5 code “fa fa-envelope” in the icon class of contact info footer it was fixed. But I am unable to fix the search icon as I cannot find the place to replace “icon-magnifier” with anything else.Can anyone help?

I didn’t disable the simple line icons. Square is only showing on the homepage instead of the search icon. Homepage is made on Elementor but header is theme default.

Same thing on two of my websites.
I solved it as follows:

? file ../wp-content/themes/oceanwp/inc/helpers.php
? look for icon-magnifier
there are 2 instances of that
? replace both by e.g. fa fa-search (make sure your site can handle fa-icons)
so
<span class="icon-magnifier" aria-hidden="true">
becomes
<span class="fa fa-search" aria-hidden="true">
? save file

For me this works out.

MIND YOU
This way you change an OceanWP file, so updates of OceanWP may restore the old code.
If anyone knows a way to replace thes two lines of code without changing the original files (using a script or something) I’d be interested!

• This reply was modified 4 years, 6 months ago by frankmanl.

I also have the same problem and I’ve been scratching my head trying to solve it. All icons on my website (https://www.happypeso.com/) are just square. I’m using the Versatile Business theme. Can anyone help?

OK, with the help of OceanWP’s team I found the solution for my issue.

• open the customizer
• go to Custom CSS/JS
• add the follwing style:

[class^="icon-"]::before {
	font-family: 'simple-line-icons' !important;
}

In your specific situation you may have to add that style to another element (see your code inspector), but this is definitely the direction you have to look at.

Frank

• This reply was modified 4 years, 6 months ago by frankmanl.