:before pseudo icon font is not loading css correctly on IE9+

Question

This is a strange quirk I've been facing. This is a responsive design so after my media query for 600px max width is applied it's like IE does not apply correctly the code. All the rest of browsers render this correctly as you can see on the images. This is affecting all the modern IE versions, I checked on IE9, IE10 and IE11.

Has somebody had the same problem? It's a mystery for me... a IE mystery! I "love" this browser...

HTML:

<figure class="animation-booking clearfix">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-filter.jpg" alt="" class="hotel-filter">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-holet-list.png" alt="" class="hotel-list js-hotel-list">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-hotel-detail.png" alt="" class="hotel-detail js-hotel-detail">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-best-deal.jpg" altz="" class="best-deal">
                    <img src="<?php bloginfo('template_directory'); ?>/casepages/d-reizen/images/animation-small-screen.png" altz="" class="booking-small">
                    <figcaption class="icon-load icon-arrow">Filteren en meer informatie over je bestemming. Allemaal op dezelfde pagina.</figcaption>
                </figure>

CSS:

@media only screen and (max-width: 600px){
    top: 85px;
    left: 175px;
    -ms-transform: rotate(290deg) scaleX(-1);
    -webkit-transform: rotate(290deg) scaleX(-1);
     transform: rotate(290deg) scaleX(-1);
     font-size: 2em;
     position: absolute;
     font-family: 'icomoon';
     speak: none;
     font-style: normal;
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
     line-height: 1;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}

Other browsers:

IE9+:

Answer 1

I already solved my issue. I didn't and don't have to time to understand why this is this issue happening only on IE from 600px lower... But I targeted the issue with a CSS hack which could be useful for more people.

Yes, a hack should not be used or at least avoided to the maximum.

Here you go:

@media screen and (max-width:600px) and (min-width:0\0) {

}

The (min-width:0\0) targets IE9+.