다중 선택에 아이콘을 추가하는 방법은 무엇입니까?

Question

부트 스트랩의 다중 선택 기능을 사용하고 있으며 멋진 글꼴을 추가하려고합니다 ... 아이콘을 유니 코드로 사용하고 있지만 작동하지 않습니다.

<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-리를 추가하는 것으로 나타났습니다 내가 옵션을 선택 카운터를 제거하려면 ... 그래서 내가 어떻게 그것을 사용자 정의 할 수 있습니다 - 그것은 어질러 UI를 여기까지

내 Fiddle

Answer 1

하고 "선택"당신이보고있는이 다중 선택 플러그인에 의해 생성 된 단지 <li>/<ul> 구조 , 원래 <select> 대신 .multiselect-native-select 요소 (Parrent 요소)에 CSS 규칙을 적용해야합니다.

이 좋아하는 다중 선택 구조 모습입니다 :

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

입니다 기본 <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; 
} 

먼저 체크 상자를 제거하고 두 번째는 왼쪽의 패딩 영역을 제거해야합니다.