为Html的select option元素添加图案

在Html中，select的<option>some text</option>标签中是不能加任何子标签的，比如span、img等等，那么是不是就只能是纯文字呢？

经过一段时间的研究，其实还是可以用font-awesome、glyphicons等等的图标来美化一下我们的option的，方法如下：

1）在css中定义一个font-face

@font-face {
    font-family: glyphicons;
    font-size: small;
    src: url('../fonts/fontawesome-webfont.woff') format('woff');//字体路径
}

2）在body中使用这个font-face

body {
    font-family: glyphicons, "Microsoft YaHei UI";
}

3）找到字符名并加上&#x

用FontCreator软件，或者查看此类字体的css文件，找到某个字符的名称，如“F046”

那么我们就可以在option中写<option>&#xF046</option> 就可以显示这个字符啦！（&#x就是\符号）