选择下拉列表中的图标字体

时间:2014-03-03 14:51:55

标签: html css icon-fonts

我正在尝试将图标字体(特别是Icomoon)添加到像AdSense在其顶部搜索菜单中的HTML选择下拉列表中。

    <div class="top-middle">
        <div class="sb-search">
            <form action="/search.php" class="search-wrapper cf"  method="post">
                <select name="scope">
                    <option value="">All</option>
                    <option class="icon icon-search" value="1">Option 1</option>
                    <option value="2"><i class="icon icon-search"></i>Option 2</option>
                </select>
                <input type="text" name="search-box">
                <button type="submit" name="top-search"><i class="icon icon-search"></i></button>
            </form>
        </div>
    </div>

enter image description here

我尝试过只使用选项中的字体图标代码,但它不起作用:

<option value="1"><i class="icon icon-search"></i> Search</option>

还尝试在选项本身中添加一个类无效:

<option value="1" class="icon icon-search"> Search</option>

有谁知道如何做到这一点?

1 个答案:

答案 0 :(得分:4)

以下是我使用Font Awesome进行此操作的方法,希望这与您正在使用的图标字体类似。

基本上,您必须使用图标字体设置选择的第一个字体,然后将第二个字体设置为您打算用于正常字词的字体,如此

<select style="font-family: 'FontAwesome', 'Open Sans';">

然后在选项组标签或任何选项的内容中,使用图标字符的Unicode值,如下所示

<select style="font-family: 'FontAwesome', 'Open Sans';">
    <optgroup label="&#xf20d; Option Group Name">
        <option value="value" >&#xf20d; Option Name</option>
    </optgroup>
</select>

您可以在代码

中查找这些字符
<i class="fa fa-buysellads"></i>

使用chrome之类的工具通过开发工具获取Unicode值

enter image description here

迟到了,但希望有所帮助!

JSFiddle