javascript - Unicode character, down triangle, shows up as strange text

I have a webpage on which I'm using a unicode down triangle on buttons to indicate that selecting those buttons will display a drop-down.

I'm adding the triangles in css thusly:

    .icon:after {
        content:"▼";
    }
    .icon {
        width:12px;
        height:12px;
        margin: 3px;
        display: inline-block;

        cursor:default;
    }

The meta tags in the page are:

However, the triangles don't show up as triangles, they show up like this:

Any idea why it might be showing up like this and how to fix it?

Answer

You can shape all kind of chars using any kind of unicode character.
In your case for example you just have to use something like:

.icon:after {

    content:"\25bc";
}

or for a small triangle:

.icon:after {
    content:"\25be";
}

This trick it's fully cross browser compatible.