-
AuthorPosts
-
September 27, 2022 at 1:47 am #1366472
Dear Support Team: In my trying to add the Search form to my custom 404 page’s body, as in e.g.:
Nothing Found – Sorry, the post you are looking for is not available. Maybe you want to perform a search?
<search box> <magnifying glass search button>The magnifying glass search button appears correctly for me there, but when I do a search from that search box, on the Search Results page, the magnifying glass search button is not displaying correctly on that page’s Search forms (neither in the header nor the body):
<search box> <little box with EB03 in it>
If I do a search via the Header’s Search form, the buttons appear correctly on the Search Results page.
Here’s how I got to this problem. First, I tried to add the following to a Code block on my custom 404 page, as you do in your default error404.php file:
<?php get_search_form(); ?>
but that did nothing. So I deleted that code. Then I tried copying and pasting into the Code block the following HTML Form code that I got from the source code for a 404 page from https://kriesi.at/themes/enfold-2017/x.html, a page that of course does not exist (I’m commenting out the initial part that is external to my Code block):
<!--<div class="entry entry-content-wrapper clearfix" id='search-fail'> <p class='entry-content'><strong>Nothing Found</strong><br/> Sorry, the post you are looking for is not available. Maybe you want to perform a search?</p>--> <form action="https://kriesi.at/themes/enfold-2017/" id="searchform" method="get" class=""> <div> <input type="submit" value="" id="searchsubmit" class="button avia-font-entypo-fontello" /> <input type="text" id="s" name="s" value="" placeholder='Search' /> </div> </form>
Of course, I’m not surprised that just copying and pasting that search button’s value would not render properly on the Search Results page: as I said, it rendered as a little box with EB03 in it instead of the magnifying glass icon–in both the header and body search forms.
Can you please help?
Thanks,
GarySeptember 28, 2022 at 2:29 am #1366647Hey Gary,
Thank you for your patience, the reason the icon font for the search icon is not showing is because you are getting a CORS error:Access to font at 'https://yoursite.com/denture6/wp-content/themes/enfold/config-templatebuilder/avia-template-builder/assets/fonts/entypo-fontello.woff' from origin 'https://www.yoursite.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
It seems that the site with “www” is considered different than with no “www”
I see in the wordpress settings the url is no “www” is the SSL certificate include both “www” and no “www” on your server?
is your root site also an Enfold theme or only the /denture6/ directory? I’m not sure why your /denture6/ site is trying to get the font from your root site.Best regards,
MikeSeptember 28, 2022 at 10:10 pm #1366811Hi Mike!
Thank you for helping me. I should have checked my own Console to see this error! Your answer got me on the right direction. FYI: No, my root site is not an Enfold theme (only my denture6 directory is), but that’s not the issue.
It turns out that this only happens for me in Firefox (I’m using version 105.01.1 (64-bit) on Windows 7) (I don’t know if that’s the browser you were using?): e.g. Chrome (105.0.5195.127) and Internet Explorer (11.0.9600.19596) were fine. I tracked down the solution: I have to add the following to the .htaccess file in my denture6 directory:
# Fix Search Button Icon Problem: # In Firefox, when user searches for something from the body of the 404 page, the # Search button icon displays as a little box with "EB03" in it instead of the # magnifying glass (in both the header and the body Search forms). It doesn't # happen in Chrome or IE. Based on the Console errors it gives, it's because # it's not loading the "entypo-fontello" font from the Enfold parent theme (in # which "EB03" is a magnifying glass) because the CORS header # 'Access-Control-Allow-Origin' is missing. # # Note that the website address here needs to match the website address in # WordPress > Settings > General > WordPress Address (URL) & Site Address (URL) # (including any "www." (or lack thereof), but the "https" isn't needed here). # The "always" in "always set" is needed. <FilesMatch ".(eot|otf|ttf|woff|woff2)"> Header always set Access-Control-Allow-Origin "www.mySite.com" </FilesMatch>
Thanks again,
Gary- This reply was modified 2 years, 1 month ago by garysch37.
September 29, 2022 at 12:13 am #1366816Hi,
I checked again and the icon is now showing, so I seems you have it sorted out now, shall we close this then?Best regards,
MikeSeptember 29, 2022 at 9:11 pm #1367002Yes, you can close this. Thanks, Mike. /gary
September 30, 2022 at 12:24 am #1367011Hi gary,
I’m glad that Mike could help you :)
Thanks for using Enfold and have a great day!Best regards,
Nikko -
AuthorPosts
- The topic ‘Magnifying Glass icon in Search form in a custom 404 page & Search Results page’ is closed to new replies.