Unicode character, down triangle, shows up as strange text

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: strange text instead of unicode character

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

This is clearly a file encoding issue. You can avoid it by just using `content:"\25bc";` — Raymond Chen, Oct 16 '12 at 00:30
I'll leave you to research that. You have to do some of the work, too. — Raymond Chen, Oct 16 '12 at 00:32
@RaymondChen alternatively, you could put that in an answer, with an explanation, and then I could accept it if it works — elemjay19, Oct 16 '12 at 00:34
Here is a nice site for [Useful UTF-8 Characters](http://mcdlr.com/8/) with `CSS Escape` and also read [this article](http://coding.smashingmagazine.com/2012/06/06/all-about-unicode-utf8-character-sets/). — The Alpha, Oct 16 '12 at 01:10
If your CSS file is external, it should be served with the correct charset -- in the MIME type or `@charset` rule or both. — ephemient, Oct 16 '12 at 01:33

score 6 · Accepted Answer · answered Oct 16 '12 at 01:04

6

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.

answered Oct 16 '12 at 01:04

Mimo

6,015
6
36
46

Any idea why mine isn't showing up just copying the character? – elemjay19 Oct 16 '12 at 01:50
2

The reason is that CSS needs to be written using only ASCII chars. You can get a look here if you'd like to use non-ASCII as well: http://stackoverflow.com/questions/2526033/why-specify-charset-utf-8-in-your-css-file – Mimo Oct 16 '12 at 02:17

score 2 · Answer 2 · answered Oct 16 '12 at 05:40

The document (HTML or CSS document) in which the CSS rule appears is sent with HTTP headers that specify an encoding other than UTF-8, probably ISO-8859-1 or windows-1252, or, in the case of a CSS document, do not specify the encoding at all, making browsers guess.

The solution is to fix this by changing the HTTP headers. See the W3C page Character encodings.

If HTTP headers do not specify the encoding, then charset declarations inside the document itself may take effect.

Using character escapes may help to remove the symptoms, but to avoid future problems (when someone adds an odd character into a document), it is best to get the encoding problem fixed.

Unicode character, down triangle, shows up as strange text

2 Answers2