Forums

  • # 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 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: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: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 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.

    # February 18, 2013 at 11:50 am

    can’t thank you enough.

    # February 19, 2013 at 6:31 am

    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:

    Any ideas? This approach definitely works as when I ignore that warning the page works fine everytime.

    # February 19, 2013 at 8:01 am

    I am using 1.9.1 and testing the site on IETester to get it to work on iE8

    # February 19, 2013 at 2:50 pm

    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.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag