IE8 fails to properly style font-awesome icon after applying css class

Question

http://jsfiddle.net/7Q7ht/10/

<a class="edit linkButton" href="javascript:void(0)" title="Enable rack editing">
    <span class="icon-pencil"></span>
    Edit
</a>

$(function(){

    setTimeout(function(){

        $('.linkButton').addClass('disabled');

    }, 2000);

    setTimeout(function(){

        $('.linkButton').removeClass('disabled');

    }, 4000);
});

a.linkButton {
    color: red;
}

a.linkButton:hover {
    color: blue;
}

a.linkButton.disabled {
    color: gray;
}

Fairly simple code. Works fine in modern browsers. Under IE8 when I add the disabled class to linkButton, the icon-pencil span continues to be painted red, not gray. Is there a simple fix for this sort of thing?

Here's a picture, don't worry about the icon not showing up, I just don't have the font loaded:

Answer 1

For me in IE8, it turns from red to gray, then red again. That's the same thing it does in Chrome.

You probably know that Microsoft says the disabled CSS3 pseudo-class only works in IE9 and up. Otherwise, the question How do you style disabled textarea in IE8? suggests some solutions.

Answer 2

IE8 does not redraw pseudo-elements without change the content.

You can solve that problem with that hack...

a.linkButton {
    color: red;

    .icon-pencil {
        content: "\F040 "
    }
}

a.linkButton:hover {
    color: blue;

    .icon-pencil {
        content: "\F040 "
    }
}

a.linkButton.disabled {
    color: gray;

    .icon-pencil {
        content: "\F040 "
    }
}

The thing is: IE8 does not redraw pseudo-elements like FontAwesome icons without a change on the content. So you need to force that change of content.

The way I did that was retrieving the content set by FontAwesome and adding a space. Unfortunately I only could do that repeating the same code for each selector that I need change the style.