Font icon in the drop-down list

Question

I'm trying to add icon fonts (specifically for Icomoon) to the HTML drop-down list, for example, 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 tried just using the font icon code in the options, but it does not work:

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

They 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 to do this?

Answer 1

This is how I did it with Font Awesome and hopefully this is a similar process using the icon font you are using.

Basically, you should set the first font of the selection using the icon font, and then the second font as the font that you intended to use for ordinary words, for example

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

, ,

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

, , !

JSFiddle