Search icon does not appear.

Sparkling
1

search icon does not appear.
Image appearance of the icon of the blog.
(link image) https://snag.gy/yWG1nC.jpg

2

Hi @claudinei,

I have tested it on my test site and it’s working fine for me using latest version of Sparkling theme.

This can be due to plugin conflict on your site so please try temporary deactivating all plugins and see whether everything works fine and then enable the plugins one by one to see which plugin is conflicting if any.

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

Kind Regards,
Movin

3

Hi, thanks for the reply! :slight_smile:
This is the blog: www.claudineifelipe.com.br
I’m using www.cloudflare.com for SSL and OpenShift for hosting.

Thank you again!
claudinei Felipe

4

This is happening because of the following error message occurring on your site as shown in the attached screenshot.

Font from origin ‘http://blogue-claudineifelipe.rhcloud.com’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.claudineifelipe.com.br’ is therefore not allowed access.

The error says that the font file that displays search icon is blocked from loading on your site due to Cross-Origin Resource Sharing policy so please contact cloudflare.com and OpenShif to remove this block to resolve the issue.

5

Thank you very much!
There is another way to solve this problem?
I can add special characters in html?

6

You are most welcome here :slight_smile:

There is another way to solve this problem? I can add special characters in html?

Yes but to make changes in HTML you have to develop custom code by creating Sparkling child theme.

Instead you can try doing it by developing custom CSS code as following and adding it in the Custom CSS option of the latest version of Sparkling theme on the below path.

Admin Area -> Appearance -> Customize -> Sparkling Options -> Other -> Custom CSS

.widget_search button#searchsubmit span {
    color: transparent;
}

.widget_search button#searchsubmit {
    background: url("http://image.flaticon.com/icons/png/128/49/49116.png") no-repeat #ff002a;
    background-size: 69%;
    background-position: center;
}