Come utilizzare un glyphicon Bootstrap 3 in un html select

Ho bisogno di fare un sottoinsieme dei glyphicons di Bootstrap 3 selezionabili nel mio ui dall'utente.Come utilizzare un glyphicon Bootstrap 3 in un html select

ho provato questo:

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

Comunque tutto quello che ottiene sono righe vuote. Qualsiasi aiuto o suggerimento alternativo apprezzato.

fonte

2013-10-08 JohnC

Non penso che la selezione HTML standard visualizzerà il contenuto HTML. Ti suggerisco di selezionare Bootstrap select: http://silviomoreto.github.io/bootstrap-select/

Ha diverse opzioni per la visualizzazione di icone o altro codice HTML nella selezione.

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

Ecco una demo: https://www.codeply.com/go/l6ClKGBmLS

fonte

2013-10-08 22:42:15 ZimSystem

Grazie, la prima parte risponde alla mia domanda, tecnicamente si tratta di un tipo di carattere in BS3 così penso di inseguo questo aspetto di esso per vedere se riesco a ottenere una selezione regolare che lavori con esso come carattere. La tua soluzione mostra tecnicamente l'icona nell'elenco a discesa di selezione che non è presente nella parte di modifica e sono preoccupato che non funzioni completamente supportando BS3 poiché sembra che il controllo sia precedente a bs3 e non fanno menzione nella loro documenti su di esso. – JohnC

Prego. Non ho mai visto nessuna menzione di BS 3 per Bootstrap Select .. speriamo che lo aggiornino .. è un ottimo plugin – ZimSystem

il bootply.com sembra inattivo. C'è un modo per sostituire il cursore con l'icona del mio glifo? – Rubyrider

ho finito per usare il pulsante di bootstrap 3 a discesa, sto postando la mia soluzione qui in caso aiuta qualcuno in futuro. Aggiungendo il bootstrap 3 list-inline alla classe per l'ul, viene visualizzato anche in un formato molto compatto.

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

sto usando Angular.js quindi questo è il codice vero e proprio che ho usato:

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

E nel mio controller:

$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; 
};

fonte

2013-10-09 20:37:05 JohnC

Questo mi ha aiutato con la versione angolare. Molte grazie. :) –

Analogamente, questo approccio funziona anche con Ember/Handlebars. –

A mia conoscenza l'unico modo per raggiungere questo in una selezione nativa sarebbe utilizzare le rappresentazioni unicode del font. Dovrai applicare il carattere glyphicon alla selezione e, in quanto tale, non può combinarlo con altri tipi di carattere. Tuttavia, i glyphicon includono caratteri regolari, quindi puoi aggiungere del testo. Sfortunatamente non è possibile impostare il font per le singole opzioni.

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

Ecco un elenco delle icone con il loro unicode:

http://glyphicons.bootstrapcheatsheets.com/

fonte

2014-11-14 18:25:34 Someone

** Nota **: questo trucco funziona anche con glyphicons font-impressionanti ' '. Invece di usare la classe 'glyphicon', usa la classe' fa'. È possibile ottenere l'elenco di unicode per le icone qui: http://fontawesome.io/cheatsheet/ –

Questo ha funzionato parzialmente con BS 3.3.7. Ad esempio, '& # x270f;' viene visualizzato ma non '& # xe023;' o '& # xe013;'. – Roland

L'applicazione 'glyphicon' su'

Come utilizzare un glyphicon Bootstrap 3 in un html select

risposta