Jak korzystać z glifu Bootstrap 3 w html wybierz

Question

Potrzebuję zrobić podzbiór Bootstrap 3 glifów do wyboru w moim ui przez użytkownika.

Próbowałem to:

<select class="form-control"> 
    <option><span class="glyphicon glyphicon-cutlery"></span></option> 
    <option><span class="glyphicon glyphicon-eye-open"></span></option> 
    <option><span class="glyphicon glyphicon-heart-empty"></span></option> 
    <option><span class="glyphicon glyphicon-leaf"></span></option> 
    <option><span class="glyphicon glyphicon-music"></span></option> 
    <option><span class="glyphicon glyphicon-send"></span></option> 
    <option><span class="glyphicon glyphicon-star"></span></option> 
</select> 

Jednak wszystko otrzymuję są puste linie. Każda pomoc lub sugestie alternatywne zostały docenione.

Answer 1

Nie sądzę, aby standardowy wybór HTML wyświetlał treść HTML. Sugeruję sprawdzenie Bootstrap wybierz: http://silviomoreto.github.io/bootstrap-select/

Ma kilka opcji wyświetlania ikon lub innych znaczników HTML w zaznaczeniu.

<select id="mySelect" data-show-icon="true"> 
    <option data-content="<i class='glyphicon glyphicon-cutlery'></i>">-</option> 
    <option data-subtext="<i class='glyphicon glyphicon-eye-open'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-heart-empty'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-leaf'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-music'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-send'></i>"></option> 
    <option data-subtext="<i class='glyphicon glyphicon-star'></i>"></option> 
</select> 

Oto demo: https://www.codeply.com/go/l6ClKGBmLS

Answer 2

skończyło się za pomocą przycisku bootstrap 3 rozwijaną, jestem tutaj delegowania moje rozwiązanie w przypadku, gdy ktoś pomoże w przyszłości. Dodanie listy startowej do klasy w klasie ul powoduje, że jest ona wyświetlana również w ładnym formacie.

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     Select icon <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu list-inline" role="menu"> 
     <li><span class="glyphicon glyphicon-cutlery"></span></li> 
     <li><span class="glyphicon glyphicon-fire"></span></li> 
     <li><span class="glyphicon glyphicon-glass"></span></li> 
     <li><span class="glyphicon glyphicon-heart"></span></li>   
    </ul> 
</div> 

Używam angularjs więc jest to rzeczywisty kod użyłem:

<div class="btn-group"> 
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
       Avatar <span class="caret"></span> 
      </button> 
      <ul class="dropdown-menu list-inline" role="menu"> 
       <li ng-repeat="avatar in avatars" ng-click="avatarSelected(avatar)"> 
        <span ng-class="getAvatar(avatar)"></span> 
       </li> 
      </ul> 
     </div> 

I w moim kontrolera:

$scope.avatars=['cutlery','eye-open','flag','flash','glass','fire','hand-right','heart','heart-empty','leaf','music','send','star','star-empty','tint','tower','tree-conifer','tree-deciduous','usd','user','wrench','time','road','cloud']; 

$scope.getAvatar=function(avatar){ 
    return 'glyphicon glyphicon-'+avatar; 
}; 

Answer 3

do mojej wiedzy to jedyny sposób, aby osiągnąć to w natywnym wyborze byłoby użycie reprezentacji czcionek w Unicode. Będziesz musiał zastosować czcionkę glyphicon do selekcji i jako taki nie można jej miksować z innymi czcionkami. Jednak gliffony zawierają zwykłe znaki, więc możesz dodawać tekst. Niestety ustawienie czcionki dla poszczególnych opcji nie wydaje się możliwe.

<select class="form-control glyphicon"> 
    <option value="">&#x2212; &#x2212; &#x2212; Hello</option> 
    <option value="glyphicon-list-alt">&#xe032; Text</option> 
</select> 

Oto lista ikon z ich Unicode:

http://glyphicons.bootstrapcheatsheets.com/