search button icon missing on website in firefox WordPress
- SOLVED
https://systematichr.com.au/ has a search field at the top of the page on right hand side.
The search function works however in firefox browser the search button does not show it's icon in firefox. works in internet explorer, safari (although it changes position) and in chrome it shows a funny icon and not a search button.
This was working perfectly and has never been changed so it must be something to do with browser or wordpress updates as far as I can tell.
Answers (4)
mod mi answers:
Taking a look on FireFox Developer tools Console there is a CSS error:
downloadable font: no supported format found (font-family: "Genericons" style:normal weight:normal stretch:normal src index:1) source: (end of source list)1systematichr.com.au:63:35
Genericons is the font used on the search button element.
I checked your css stylesheet to find out what font formats you include for the Genericons font and you have .svg and and .eot. Those formats are not supported by Firefox you have to include a .woff or maybe .ttf version.
You can download all formats from here: https://genericons.com
Add them to your font folder and update your css stylesheet
Graham Kite comments:
I have added css and it shows on my local dev site but not the live server. It seems there might be a couple of issues but I have cleared all caches, and done several hard refreshes and it is still not showing for me.
mod mi comments:
There are several css errors on the inspector.
The one that seems related to the fonts is at the line and I think:
url(//systematichr.com.au/wp-content/themes/systematic/font/genericons.ttf) format('truetype'),
you should change it to this (add ";" at the end not "," to close the src property.
url(//systematichr.com.au/wp-content/themes/systematic/font/genericons.ttf) format('truetype');
Also most important there is inline css at the <header> section where .woff is not included in the font's src.
It's wrapped in a <style> tag <style type="text/css" id="aoatfcss" media="all">
Graham Kite comments:
Thnaks don't know how I missed the ; (hmm guessing it to many late nights working with bleary eyes).
can't find the id "aoatfcss" anywhere I thinkI am going to have to try and figure out how to do this with font awesome.
and I think I am going to have to write the css instead of calling the wordpress get_search_form(); function.
so frustrating
Graham Kite comments:
HI Everybody I have had to leave the issue unresolved for now due to more pressing matters. I think db put in the most amount of time and as the prize was to small to share around, I have awarded the prize here, but would like to thank everybody for the help.
Arnav Joy answers:
have you added any optimization or caching plugin ?
Graham Kite comments:
Yes but I clear cache and hard refresh and I see all updates. Also this was showing up for a couple of weeks so it is doubtful it's totally a cache issue.
Arnav Joy comments:
you can try one thing.. disable caching and optimization plugin once .. clear all caching and then check again if it is working or not ??
if it is working then again enable caching and optimization and check.
Graham Kite comments:
Hi Arnav was planning on doing that, but I talked with the person and she is happy for now to just make it disappear until I have more time. This is a very strange issue. I see it on my local dev but not online. bd picked up I missed some ";" which was really helpful but since I copied that from my local it is doubtful if that is the entire issues.
For now I am going to set to display: none and come back to it in a week, when I don't have to do it at 3am. :)
Arnav Joy comments:
ok.. take rest .. Goodnight !
Graham Kite comments:
and you, thanks for your thoughts
Darlene Grace Arcenal answers:
Your Genericons font is eot. EOT is only supported on internet explorer that's why the search icon is not rendered on firefox, chrome and safari. Try using TTF. See this as a reference http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Sébastien | French WordpressDesigner answers:
probably a problem with the lines related of font-face "genericon" in your css file
probably related at your cache, as arnav writed