如何用CSS显示带箭头的符号

Question

我看到了一些像这样的漂亮风格的下拉框,想要创建我自己的下拉框:

用于创建箭头的CSS非常简单.它只是将一个unicode字符作为内容添加到元素的类之前;

.select:before{
    content: "\f0d7";
}

我自己尝试了,但是没有显示角色,因为角色不包含在像Arial这样的默认语言中:

http://jsfiddle.net/3cW9M/

我当然可以包含一个包含这个字符的字体,但我认为要为该错误添加另一个~100kb的页面需要很多开销.

有没有其他好的解决方案来存档这个箭头样式没有额外的字体或图像？

Answer 1

您可以使用其他unicode或使用边框: DEMO

.select:before{
    content: "\25be  or  \25bc  ?  ";
    float:right;
    color:gray;
}
.select:after{
    content: "";
    margin:0 0.5em;
    display:inline-block;
    border: 7px solid transparent;
    border-top:8px solid gray;
    border-bottom:0 none;
}