A question regarding sf_fonts

[NiO]

Hi Swiftideas,

I tricky challenge: the contact and search options in the header use specific sf font icons. Is it possible to replace these with more generic google font icons?

It is not that they are not pretty, but I am integrating a few external pages in my site and when displaying the icon they cause an error:

“Font from origin ‘my Atelier site’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘my external page’ is therefore not allowed access.”

So I either need to replace the two font icons or add the right header to the right font file 🙂

Thanks,
Johan

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[NiO]

Hi Rui,

This is different. I get this when loading from a different domain that I am integrating, which doesn’t live on the same server: http://testpeijnenburg.photoshelter.com/. I managed to get everything working. Just this part doesn’t 🙁

Thanks,
Johan

[Rui Guerreiro – SUPPORT]

Hi,

Didn’t saw any error in the console of the other site, but that won’t work because of what I explained above. Since the domains are different that’s interpreted by the browser has a security breach and it’s denied the request.

Regarding your initial request. Add the code below to your functions.php of the child theme and adjust the html code for the return icon.

function sf_atelier_header_my_custom_contact_icon() {
return '<i class="fa-envelope-o"></i>';
}
 
add_filter('sf_header_contact_icon', 'sf_atelier_header_my_custom_contact_icon', 99);

function sf_atelier_header_my_custom_search_icon() {
		return '<i class="sf-icon-search"></i>';
	}
	add_filter('sf_header_search_icon', 'sf_atelier_header_my_custom_search_icon', 99);

EDITED- I adjusted the function of the bottom because it was incorrect.

-Rui

[NiO]

Thanks Rui! Can’t try it right away because I am away but will try that code early next week.

[Kyle – SUPPORT]

Ok no problem

[NiO]

Hi Rui & Kyle,

I am back and tried the code above. The contact one does replace the icon. The search one doesn’t yet. Tried to solve it by replacing <i class="sf-icon-search"></i> with <i class="fa-search"></i>, but no result yet …

In addition: these buttons have a transition behind it. So the transition and the resulting icon would have to be changed as well …

Thanks,
Johan

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide me the site url and ftp access so I can give it a try.
Not sure about the animation, do you want to remove the current animations?

-Rui

[NiO]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Don’t worry with your live site. I’m leaving at the moment(don’t have enough time to check it) and will check this issue in the morning.

Thanks

-Rui

[Rui Guerreiro – SUPPORT]

Hi,

couldn’t figure out why the search filter wasn’t working, so as an alternative I added the function sf_get_search() to the functions.php and replaced the icon there.

Also add the code below to adjust the size and the vertical position.

.menu-search .fa-search{
font-size:24px;
}
.menu-search{
margin-top: 9px;
}

-Rui

[NiO]

Hi Rui,

Included the extra CSS. The only problem now is that the search has changed from being a full screen search to a standard search (although the theme options are still set to fullscreen search) …

Thanks,
Johan

[NiO]

Hi Rui,

Went into theme options, selected standard search, saved, switched back to fullscreen search, saved ….. and now fulscreen search is working again 🙂

Cheers,
Johan

[NiO]

Nope … now it is a standard search again. Seems like something is resetting something in the back ….

[Rui Guerreiro – SUPPORT]

Hi,

Sorry, it was me changing the code.

Check again.
maybe it will be necessary to adjust the css with this one.

#header .aux-item ul.menu>li>a.header-search-link i {
  height: 38px!important;
}

-Rui