Question Search Icon "Magnifying Glass" Selected But Get "Square" instead

[stephenadm]

New to building websites and especially with Elementor. Literally the first time. I'm not sure if this is a WP problem, a browser problem, or an Elementor problem but I figured you guys would know. I didn't see it posted in the forum after performing a search so I wanted to know the following:

In my "Search Icon", I selected "Magnifying Glass". Instead, a square appears. In my drop down menu, I selected Chevron. Also, a "square" appears. If I select the "+" icon, it does appear correctly but the magnifying glass and any other icon in the drop down menu options, only a square appears.

What can I do to change this? I'm sure it's something simple. I will say that everything is running on the latest software updates including my Mac. Thanks! I've attached a screenshot below.

 

[Tonio]

I read somewhere that they hadn't uploaded the new icons correctly. Can't find this info anymore but I guess updating the Elementor plugin might solve your problem.

 

[stephenadm]

Yeah everything is updated properly. I can't seem to find anything about it either but I'm not doing anything to cause it, that's for sure. Hopefully, someone in here has experienced it and can offer some feedback. It's confusing to say the least. The square simply bothers me and I want to eliminate it.

 

[stephenadm]

And the nightmare continues... I'm really lost on this one and would value any help provided.

 

[stephenadm]

Okay I figured it out. These relate to Font Awesome icons obviously. There is a Font Awesome plugin that you need to install to make all of these appear properly. I found a Youtube video and would link it but that's not necessary. Just go to Plugins, type Font Awesome, download and Activate. Refresh the page and boom, it's done.

 

[Community]

You need to upgrade to font-awesome 5 which doesnt happen automatically. Although on some sites it does prompt you within the editor.

You need to make sure you are running the latest version of elementor and pro then goto the admin panel - Elementor - tools - then you will see a tab "Font Awesome Upgrade"

Click upgrade and then clear any caches you may have, such as cloudflare, hosting caching and browser caches.

Your icons should start working again

 

[Community]

P.s Remove the font-awesome plugin you mentioned installing a few posts up. That's not a solution, simply a hacky work around which will mean you are loading more resources than you need to.

 

[chrishogger]

You need to upgrade to font-awesome 5 which doesnt happen automatically. Although on some sites it does prompt you within the editor.

You need to make sure you are running the latest version of elementor and pro then goto the admin panel - Elementor - tools - then you will see a tab "Font Awesome Upgrade"

Click upgrade and then clear any caches you may have, such as cloudflare, hosting caching and browser caches.

Your icons should start working again

I am fairly new to Elementor (I have the free version 2.8.1) and have been gradually exploring its widgets. I have noticed that some in the panel will not work without my first making an upgrade to Font Awesome 5. I have veered away, so far, from doing this upgrade, through observing so many people in other forums complaining that after doing the upgrade all sorts of things went wrong with their sites. Should I ignore these and just bite the bullet? Would be interested to hear others' experiences with this.