javascript - Unicode字符(向下三 Angular 形)显示为奇怪的文本

Question

我有一个网页，在该网页上我正在按钮上使用unicode下三角符号，以指示选择这些按钮将显示一个下拉列表。

我因此在css中添加三角形:

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

页面中的meta标签是:

    <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">

但是，三角形不显示为三角形，它们显示如下:

知道为什么它可能会像这样出现以及如何解决吗？

Answer 1

您可以使用任何一种unicode字符来塑造所有字符。
以您的情况为例，您只需要使用以下内容:

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

或小三角形:

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

这个技巧是完全跨浏览器兼容的。