选择下拉菜单中的图标字体

Question

我正在尝试像LinkedIn顶部搜索菜单中一样，在HTML选择下拉菜单中添加图标字体（特别是Icomoon）。

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

我尝试在选项中简单使用字体图标代码，但它不起作用：

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

我也尝试给选项本身添加类，但没有成功：

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

有人知道如何完成这个操作吗？

- bhttoan

---

你能给我展示一下你的CSS吗？ - Siyah

需要真正看到HTML。 - Billy Moat

Answer 1

这是我使用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值

有点晚了，但希望能有所帮助！

JSFiddle

- Brian Leishman