Icon font behaving strangely in IE11

Question

I'm having a strange issue with an icon font misbehaving in IE... specifically, it seems that the browser is showing the icon associated with the lower-case character instead of the upper-case character. The characters in question are being specified in CSS using the content property of :before selectors.

For example, if we have CSS like:

.icon-1:before {
    content: 'o';
}

.icon-2:before {
    content: 'O';
}

and HTML like:

<div class='icon-2'></div>

we see the icon-1 icon instead of the icon-2 icon.

Does anyone have any suggestions as to how this could be happening? The icon font behaves correctly in other browsers, and even works correctly in my VM version of IE. I was only able to reproduce this using a colleague's Windows laptop.

Edit: This is happening on IE11, Windows 8.1.

Edit 2: Just found this, which may explain the behavior:

http://www.browserquirks.org/blog/2014/04/02/css-content-rule-is-not-case-sensitive-in-ie8-plus/

Answer 1

Apparently when IE looks at CSS it ignores the casing. You can however add a text-transform property to fix the issue.

.icon-1:before {
    content: 'o';
}

.icon-2:before {
    content: 'O';
     text-transform: uppercase;
}

That should make the second one be uppercase and appear correctly on each browser.