How to show an arrow down symbol with CSS

css, fonts, unicode

Solution

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

Problem

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?

Original source