I'm using icon fonts from Icomoon in my most recent project. They work perfectly in all browsers except IE8.
What I get is a little box instead of the icon.
Has anybody had a similar experience. My css looks like this:
Weirddd. I think this has happened to a few others as well. What I would do is go back to icomoon and reselect those icons. When you click on font, you will see your icons within boxes. At the top of each box there is a question mark that you can click, give them a letter and use that for the data icon value.
What I did for mine was use h (heart), d (dribbble), i (instagram), etc.
One thing of note is that in Chrome, in the data-icon attribute source I see a little square . . . I'm guessing this is because it's a (possibly pasted-in) Unicode character or something? Following @chrisburton's suggestion might do the trick for you.
Hi Chris....yes weird it is, it's driving me crazy because yesterday when I tested in IE 8 it worked. I'll give you're suggestion a wirrel and replace the html value with a letter and see what happens. I've noticed that in IE9 the same box appears for a milli second before the icon loads.
Using a clean install of IE8 in a virtual machine running Win XP, it just seems as if the icon font simply isn't loading. Taking a look in IE9 on Win7, it loads fine, but if I set browser mode to IE8, it seems as if none of your [data-icon]:before styles are being recognized, as they're all marked out within the IE Developer Tools window.
Edit: Nope, that doesn't seem to be the problem, as any new styles added under that declaration clearly take effect. Curiouser and curiouser.
It's a bit of a puzzler. IE9 is fine, IE7 nothing at all but that's OK, IE 8 a box. I agree Josh, the icons are just not being recognised. What I'm going to do is use a different set of icons like Heydings icons and not using the data icon attribute but using psudo classes and see what happens. I think a bit of trial and error is called for. I'll let you know what happens. Have a good weekend.
Chris / Josh...following on from the IE8 issue on Friday I've looked at various suggestions but none worked until I tried implementing the one here: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/.
Basically I think it forces a page reload and it works once I ignore an error message that I get in relation to the following script:
if ($.browser.msie && 8 == parseInt($.browser.version)) {
$(function() {
var $ss = $('#base-css');
$ss[0].href = $ss[0].href;
});
}
I get an error which says - Error: $ is undefined. Since looking at js for me is like looking into a black hole would you have any idea what the issue is.
That bit of script is jQuery, and you don't have jQuery loading on your page. Grab the source link for the Google-hosted jQuery library from here and include it before that script tag.
Ah, I forgot about the removal of $.browser. Loading jQuery 1.8.x instead would be the simplest solution.
Edited to add: Testing anything JS-related in IETester is generally a bad idea, in my experience. JavaScript in IETester doesn't always work the same as in IE itself, unfortunately. For this you're probably okay, but in the future you may want to look into using Browserstack or setting up a testing VM instead. I use https://github.com/xdissent/ievms/ personally.
Thanks Josh. You're right about IE Tester as all sorts of weirdness started happening today when I changed the $.browser reference. The icons started to swop positions, absolutely bizarre.
Am I on the right lines with the following:
if ($.support.msie && 8 == parseInt($.browser.version)) { $(function() { var $ss = $('#base-css'); $ss[0].href = $ss[0].href; }); }
or should I change ($.browser.version) to ($support.version).
I'm using icon fonts from Icomoon in my most recent project. They work perfectly in all browsers except IE8. What I get is a little box instead of the icon. Has anybody had a similar experience. My css looks like this:
@font-face { font-family: 'icomoon'; src:url ('../fonts/icomoon.eot'); src: local('☺'), url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; font-variant:normal; }
[data-icon]:before { font-family: 'icomoon'; content: attr(data-icon); speak: none; font-weight: normal; line-height: 1; -webkit-font-smoothing: antialiased; }
I then use the relvant icon in my html (data-icon="")
Anybody got any suggestions.
Many thanks.
Can we see a live site?
Hi Chris....the test page is: http://www.nscom.ie/wooden_spoon Where the icons appear in the navigation in all browsers IE8 just has a box.
Many thanks.
Weirddd. I think this has happened to a few others as well. What I would do is go back to icomoon and reselect those icons. When you click on font, you will see your icons within boxes. At the top of each box there is a question mark that you can click, give them a letter and use that for the data icon value.
What I did for mine was use h (heart), d (dribbble), i (instagram), etc.
This StackOverflow might have something helpful in it: http://stackoverflow.com/questions/9809351/ie8-css-font-face-fonts-only-working-for-before-content-on-over-and-sometimes/10079790#10079790
One thing of note is that in Chrome, in the data-icon attribute source I see a little square . . . I'm guessing this is because it's a (possibly pasted-in) Unicode character or something? Following @chrisburton's suggestion might do the trick for you.
Hi Chris....yes weird it is, it's driving me crazy because yesterday when I tested in IE 8 it worked. I'll give you're suggestion a wirrel and replace the html value with a letter and see what happens. I've noticed that in IE9 the same box appears for a milli second before the icon loads.
Many thanks.
Nothing at all shows up for me in IE8 but I do see the
?within a box in view source.Thanks Josh...I'll have a look at that. Many thanks.
That's interesting as I would have thought that the html code would appear in there, the likes of data-icon="" instead of just data-icon="?". Mmmmm
You get an x inside of a box, I get a ? inside of a box. That's what I meant.
Using a clean install of IE8 in a virtual machine running Win XP, it just seems as if the icon font simply isn't loading. Taking a look in IE9 on Win7, it loads fine, but if I set browser mode to IE8, it seems as if none of your
[data-icon]:beforestyles are being recognized, as they're all marked out within the IE Developer Tools window.Edit: Nope, that doesn't seem to be the problem, as any new styles added under that declaration clearly take effect. Curiouser and curiouser.
It's a bit of a puzzler. IE9 is fine, IE7 nothing at all but that's OK, IE 8 a box. I agree Josh, the icons are just not being recognised. What I'm going to do is use a different set of icons like Heydings icons and not using the data icon attribute but using psudo classes and see what happens. I think a bit of trial and error is called for. I'll let you know what happens. Have a good weekend.
Here are a couple more links that may help: http://www.boonex.com/n/ie8-icon-font-fix-and-unused-language-keys-2012-08-20
http://stackoverflow.com/questions/12680446/font-awesome-not-appearing-in-internet-explorer-8
Chris / Josh...following on from the IE8 issue on Friday I've looked at various suggestions but none worked until I tried implementing the one here: http://andymcfee.com/2012/04/04/icon-fonts-pseudo-elements-and-ie8/. Basically I think it forces a page reload and it works once I ignore an error message that I get in relation to the following script:
if ($.browser.msie && 8 == parseInt($.browser.version)) { $(function() { var $ss = $('#base-css'); $ss[0].href = $ss[0].href; }); }I get an error which says - Error: $ is undefined. Since looking at js for me is like looking into a black hole would you have any idea what the issue is.
Many thanks.
That bit of script is jQuery, and you don't have jQuery loading on your page. Grab the source link for the Google-hosted jQuery library from here and include it before that script tag.
can't thank you enough.
Josh...just when I thought I was sorted I get this message:
Error: '$.browser.msie' is null or not an object
My code is as follows:
if ($.browser.msie && 8 == parseInt($.browser.version)) { $(function() { var $ss = $('#base-css'); $ss[0].href = $ss[0].href; }); }Any ideas? This approach definitely works as when I ignore that warning the page works fine everytime.
The browser property is removed in 1.9 - http://api.jquery.com/jQuery.browser/ , what version jQuery do you use?
I am using 1.9.1 and testing the site on IETester to get it to work on iE8
Ah, I forgot about the removal of
$.browser. Loading jQuery 1.8.x instead would be the simplest solution.Edited to add: Testing anything JS-related in IETester is generally a bad idea, in my experience. JavaScript in IETester doesn't always work the same as in IE itself, unfortunately. For this you're probably okay, but in the future you may want to look into using Browserstack or setting up a testing VM instead. I use https://github.com/xdissent/ievms/ personally.
Thanks Josh. You're right about IE Tester as all sorts of weirdness started happening today when I changed the $.browser reference. The icons started to swop positions, absolutely bizarre.
Am I on the right lines with the following:
if ($.support.msie && 8 == parseInt($.browser.version)) { $(function() { var $ss = $('#base-css'); $ss[0].href = $ss[0].href; }); }
or should I change ($.browser.version) to ($support.version).
Thanks.