How to show an arrow down symbol with CSS

Question

I saw some nice styled dropdown boxes like this one and wanted to create my own one:

The CSS to create the arrow was quite simple. It just adds a unicode character as arrow as content to the :before class of an element;

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

I tried it on my own, but the character is not shown, because the character is not contained in a default language like Arial:

http://jsfiddle.net/3cW9M/

I could of course include a font, that contains this character, but I think its to much overhead to add another ~100kb to the page just for the error.

Is there any other good solution to archive this arrow style without additional fonts or images?

Answer 1

You may use other unicode or use borders : 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;
}