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

admin管理员组

文章数量:1327553

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?

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?

• javascript
• css
• unicode
• utf-8
• ascii

Share Improve this question Follow edited Nov 7, 2017 at 0:13 elemjay19 asked Oct 16, 2012 at 0:27 elemjay19elemjay19 1,16644 gold badges2626 silver badges5252 bronze badges 6

• This is clearly a file encoding issue. You can avoid it by just using content:"\25bc"; – Raymond Chen Commented Oct 16, 2012 at 0:30
• @RaymondChen is that supported across all browsers? – elemjay19 Commented Oct 16, 2012 at 0:31
• I'll leave you to research that. You have to do some of the work, too. – Raymond Chen Commented Oct 16, 2012 at 0:32
• @RaymondChen alternatively, you could put that in an answer, with an explanation, and then I could accept it if it works – elemjay19 Commented Oct 16, 2012 at 0:34
• Here is a nice site for Useful UTF-8 Characters with CSS Escape and also read this article. – The Alpha Commented Oct 16, 2012 at 1:10

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 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 patible.

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.

本文标签： javascriptUnicode characterdown triangleshows up as strange textStack Overflow