Problem.
Only Internet Explorer browser doesn't display font-awesome icon.
Funny thing is it's been working until yesterday.
This is a link, check this out.
Try the link above with IE, then there will be a white, thick horizontal line, which is supposed to include an "?" icon in the middle.
Try it again with Chrome, FireFox, Safari and anything, then "?" icon will appear in the middle of the line.
More info
I'm hosting this website on Microsoft Azure. It's free mode by the way.
There's no additional configuration for MIME type. This web is based on MVC5.
Strangely enough, CSS properties on :after persudo are all canceled in IE like there's overridings on the element or something ( which is absolutely not!! ), please inspect it with F12 tool. This is probably a clue for you. ( I completely have no idea of why the properties got canceled )
What I've done...
Setting MIME type manually
Checking if IE is on compatibility mode or registered as it is.
Looking at console log, to see if there's an error on any font-related resources.
Diagnosing with F12 network menu.
Googling with this issue and finding possible answers in Stackoverflow.
What seems to be the matter? It worked until yesterday but today it just doesn't all of sudden. I deleted some codes I added today, making the resources absolutely same as yesterday, but it still doesn't work. It drives me crazy!!
you must upgrade your font-awesome package and use this in #font-face{}
src: url('../font/font-awesome.eot?#iefix') format('embedded-opentype'),
i hope helfpul
Related
I'm using Font Awesome. Sometimes - and I haven't figured out the pattern yet, unfortunately - the icons aren't working in Safari. When this happens, Safari shows the standard icon for a missing character, the outline of a box.
When I reset the browser, Font Awesome works as expected. And then, after some time, it reverts to not working again.
I'm serving Font Awesome from Nginx. That could be relevant, because I originally served these files without the proper headers, which broke Font Awesome in Safari. I'm wondering if maybe somehow Safari could have cached the non-header versions of the files, and maybe somehow keeps using them even when cache is cleared (maybe it's caching fonts somewhere else? But why would it revert to the broken version?).
Okay, this isn't much to go on I know, but any ideas, has anyone else experienced this? Thank you! :)
Edited to add screenshot of broken behavior:
I'm having a problem with a Wordpress based site I'm building on: In Chrome, on Windows 7, the body text on the sites' homepage is set to display as a Google Font. However the last line of the text is displaying as the default sans-serif font.
I have thought about asking about this on Wordpress.org but as the problem is confined to one browser on one OS (albeit the most commonly used browser on the most commonly used OS, natch) thought better to ask here. Have been looking all day and not seen anyone else have the same problem.
It's the latest version of Chrome and there is no problem in IE, Firefox, Opera etc. No problems (as yet...) on any other platforms at all.
There don't appear to be any problems with any other Google Fonts used in the site.
The site is currently hosted at http://best.videofeet.com
Upon inspection of the source there is no apparent reason why it would render like this.
I'm stumped.
Here's a link to an image of the problem (From VirtualBox on Mac - the only means I have available to me to replicate the bug as described by the client): http://imgur.com/XdJlCbc
OK, I'll take a stab at answering this now I've had a tinker. It looks like Josefin Sans does not have a glyph for ellipsis (…), so Chrome is swapping out that line. There are other people experiencing this with other Google fonts:
https://code.google.com/p/googlefontdirectory/issues/detail?id=204
http://wordpress.org/support/topic/a-problem-with-ellipsis-the-google-font-story
The lack of ellipsis can be tested here
Either swap the ellipsis for three periods and risk the wrath of typophiles, or change the font I'm afraid.
Before and after image showing the paragraph tag with the ellipsis removed in developer tools here:
http://i.imgur.com/RmQwlaa.jpg
Me and my colleague have been trying to solve this problem for awhile and we can not get it to work. Hopefully someone out there is smarter than us and have some good input on this.
When using IE8, IE9 or IE10 to visit websites http://glyphicons.com/ or http://getbootstrap.com/components/ not all the glyphicons are showing (some are showing but others just show as boxes []).
In Chrome all are showing.
EDIT: I should add that this is on computers on our company network. Could there be a setting here that prevents us for show all glyphicons?
EDIT2: I now have suspicions that our Group Policy disables XMLHTTP for all users on network. Therefore, is it possible to encode the halfling font and use it directly in the CSS?
I have found the solution. It was quite simple. Unfortunately I won't be able to use Glyphicons.
IE have a setting to restrict font download. This is enabled by group policy and cannot be changed on standard workstations. I have been able to recreate the same behavior on my own laptop by restricting font download.
Se this article for further explanation:
http://msdn.microsoft.com/en-us/library/ms533034(v=vs.85).aspx
To answer your comment olahell, if you count icons you will get 470 icons although it's write 420 with IE8. It's maybe an old forgotten image only shown on old IE version.
It looks like the Glyphicons site does some browser sniffing to come up with the 470 / 420 icon figure. The most likely reason for that is that 50 icons dont work in IE; and that is probably due to IE having no SVG support.
I'm using the glyphicons pro library for my website and I noticed that on my MBP Retina, they show up as hi-res on Chrome, but not FF (even though FF says it's up-to-date). Here are a couple of screenshots (first one is FF):
Any idea what's going on?
You might be using a Web accelerator addon in Firefox that could cause this pixelation. Try disabling that plugin and see if it works.
If thats not the case then your Firefox may be running in 256 color mode, for details see Website colors are wrong.
Another possibility - check the properties of the shortcut you use to load Firefox (right-click, then Properties). Under the Compatibility tab, make sure nothing is selected.
or Maybe your screen res changes in FireFox, see this
I can use FireFox and FireBug, in a pane, I can open a .css file, in real time, as I make edits, I can see those edits reflected in FireFox. This is a very handy and valuable feature.
Without starting a debate over browsers, I would love to be able to do the same thing in Safari. My far too small display on this laptop aside, real time development of css helps me move things along at a very nice pace.
While I am near certain any input manager for Safari would not officially be supported, I am OK with that. I have been playing around with the "Web Inspector", but as far as I can tell, this will not fit the bill for my needs.
Are you doing this on a Mac? You can give CSSEdit a try. It's not free, but has a built in webkit preview
Get the latest version of webkit, it has a much more powerful version of Web Inspector which you can use side by side with the latest Safari (two browsers open) to debug Safari.
Which version of Safari are you using? I'd recommend getting Safari 4 Public Beta, which has a brand new Web Inspector that allows you to edit the DOM real-time (I'm not sure whether you can actually edit a CSS file with it, however).
Steve
You could try installing FirebugLite.