Grow your CSS skills. Land your dream job.

Icon fonts not working in IE8

  • # February 15, 2013 at 11:04 am

    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.

    # February 15, 2013 at 11:09 am

    @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;
    }

    # February 15, 2013 at 11:15 am

    Can we see a live site?

    # February 15, 2013 at 11:39 am

    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.

    # February 15, 2013 at 12:19 pm

    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.

    # February 15, 2013 at 12:21 pm

    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.

    # February 15, 2013 at 12:24 pm

    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.

    # February 15, 2013 at 12:26 pm

    Nothing at all shows up for me in IE8 but I do see the `?` within a box in view source.

    # February 15, 2013 at 12:38 pm

    Thanks Josh…I’ll have a look at that.
    Many thanks.

    # February 15, 2013 at 12:41 pm

    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

    # February 15, 2013 at 12:44 pm

    You get an x inside of a box, I get a ? inside of a box. That’s what I meant.

    # February 15, 2013 at 12:46 pm

    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.

    # February 15, 2013 at 1:53 pm

    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.

    # February 18, 2013 at 11:16 am

    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:

    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.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".