Icon font in select drop down

Question

I am trying to add icon fonts (Icomoon specifically) into an HTML select drop down like Linkedin has in its top search menu.

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

I have tried simply using the font icon code in the option but it doesn't work:

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

Have also tried to add a class to the option itself to no avail:

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

Does anyone know how this can be done?

Answer 1

Here's how I did this with Font Awesome and hopefully this is a similar process with the icon font that you're using.

Basically, you have to set the first font of the select with the icon font and then the second font as the font that you intended to use for the normal words like so

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

Then in the the option group label, or in the content of any options, you use the Unicode value of the icon character like this

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

You can look up these characters by having this in your code

<i class="fa fa-buysellads"></i>

And using a tool like chrome to grab the Unicode value through the dev tools

Little late, but hope it helps!

JSFiddle