Unicode down triangle doesn't show up in IE9

Tags: html,css,internet-explorer,css3,internet-explorer-9

Problem :

I'd like to include a down triangle in my CSS dropdown menu. It works correctly in every browser, except for IE9.

In normal browsers (Firefox, Opera, Chrome, etc.) it looks like this way:

However in IE9 it shows up like this:

The CSS code:

.parent-down > em:after, 
.parent-down > a > em:after  {
    content: "\25be";
}

Any idea what can be the problem and how could I fix it?

---

Solution :

You need to declare the font family for the (pseudo-)element containing the special character so that you use only fonts that are known to contain that character. For example, add the following rule into your declaration:

font-family: Arial Unicode MS, Lucida Sans Unicode, sans-serif;

When you declare Helvetica, as you say (in a comment) you do, Windows treats it as Arial by its own special internal rules (if Helvetica is not available, and it usually isn’t). Since Arial does not contain the character, the browser should check the different fonts in the system in some order set by its settings to find one that contain the character. Browsers may fail in doing so, and IE often does.

In this case, it is probably better to use another, more visible character, which happens to have better font coverage. The basic principle is still that special characters need special attention when declaring fonts. For generalities on this, see my Guide to using special characters in HTML.