圖標字體在選擇下拉

我想將圖標字體（特別是Icomoon）添加到像LinkedIn的頂級搜索菜單中的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>

有沒有人知道如何做到這一點？

來源

2014-03-03 bhttoan

你能告訴我你的CSS嗎？ – Siyah

還需要真的看到html。 –

下面是我如何用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>

中，並使用鍍鉻的工具，通過開發者工具

enter image description here

有點晚搶Unicode值，但希望它幫助！

JSFiddle

來源

2015-06-05 15:13:37

圖標字體在選擇下拉

回答

相關問題