Question

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:

    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, width=device-width" />
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; chrome=1" >
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

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 1

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.