Unicode字符,向下三角形,显示为奇怪的文本

Question

我有一个网页,我在按钮上使用unicode向下三角形表示选择这些按钮将显示下拉列表.

我这样在css中添加三角形:

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

页面中的元标记是:

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

这个技巧完全跨浏览器兼容.