マルチセレクトにアイコンを追加するには？

Question

私はBootstrapのマルチセレクトを使用しています。私はフォントの素晴らしいアイコンを追加しようとしています...アイコンをユニコードとして使用していますが、動作しません。

<select style="font-family:'FontAwesome', Arial;" multiple="multiple" 
     class="form-control vacances"> 
    <option>&#xf2bc; 1</option> 
    <option>&#xf2bc; 2</option> 
    <option>&#xf2bc; 3</option> 
</select> 

私は複数選択コンストラクタは、それ自身のテンプレートを使用して、それ自身のUL-LIを追加していることに気づいた私は、オプションを選択カウンタを削除したい場合は...ので、どのように私はそれをカスタマイズすることができます - それはめちゃくちゃですUIここまで

は私Fiddle

Answer 1

ネイティブ<select>要素が隠されている、とあなたが見ている "選択" するので、複数選択プラグインによって生成されたばかり<li>/<ul>構造であり、 <select>の代わりに.multiselect-native-select要素（パラレル要素）のCSSルールを適用する必要があります。：

.multiselect-native-select { 
    font-family: 'FontAwesome', 'Helvetica'; 
} 

これは複数選択構造がどのように見えるかです：

：オプションのカウンタを無効にするには

<!-- Apply CSS rules here: --> 
<span class="multiselect-native-select"> 

    <!-- This is your original <select> element, which is hidden: --> 
    <select multiple="multiple" class="fontawesome-select vacances"> 
    <option disabled="" selected="">Options</option> 
    <option> ZONE B</option> 
    ... 
    </select> 

    <!-- This is the structure generated by multi-select plugin: --> 
    <div class="btn-group"> 
    <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="Options" aria-expanded="false"> 
     <span class="multiselect-selected-text">Options</span> 
     <b class="caret"></b> 
    </button> 
    <ul class="multiselect-container dropdown-menu"> 

     <li class="disabled active"> 
     <a tabindex="-1"> 
      <label class="checkbox"> 
      <input type="checkbox" value="Options" disabled=""> Options 
      </label> 
     </a> 
     </li> 
     <li class="disabled active"> 
     <a tabindex="0"> 
      <label class="checkbox"> 
      <input type="checkbox" value=" ZONE B">  ZONE B 
      </label> 
     </a> 
     </li> 
     ... 

    </ul> 
    </div> 
</span> 

JSFiddle Demo

---

、あなたは、numberDisplayedとallSelectedTextオプションを両方を使用する必要があります

$('.vacances').multiselect({ 
    numberDisplayed: 10, //number that is more or equal to number of options 
    allSelectedText: false 
}); 

Answer 2

Htmlの

<select style="font-family:'FontAwesome', Arial;" multiple="multiple" 
 
      class="form-control vacances" id="opt"> 
 
     <option>value1</option> 
 
     <option>value2</option> 
 
     <option>value3</option> 
 
    </select>

です0

のCss

select#opt option[value="value1"] { background-image:url(yourIcon.png); } 
 
select#opt option[value="value2"] { background-image:url(yourIcon.png); } 
 
select#opt option[value="value3"] { background-image:url(yourIcon.png); }

Answer 3

<select multiple="multiple" class="form-control vacances"> 
    <option><i class="fa fa-font-icon-name></i> 1</option> 
    <option><i class="fa fa-font-icon-name></i> 2</option> 
    <option><i class="fa fa-font-icon-name></i> 3</option> 
</select> 

FAクラスのフォントファミリは、フォントのアイコン名は、お使いのフィドルにあなたのコードを見てhttp://fontawesome.io/cheatsheet/

を参照してください、「FontAwesome」で、ここにスタイルを無効にする簡単な修正はあり

.multiselect-container > li > a > label > input[type="checkbox"] { 
    display: none; 
} 
.multiselect-container > li > a > label { 
    padding: 3px 16px; 
} 

最初にチェックボックスを削除し、2番目のチェックボックスを削除すると、左側のパディング領域が削除されます。