Comment utiliser un Bootstrap 3 glyphicon en html, sélectionnez

J'ai besoin de faire un sous-ensemble de l'Bootstrap 3 glyphicons sélectionnable dans mon interface par l'utilisateur.

J'ai essayé ceci:

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

Cependant tout ce que je reçois sont des lignes vides. De l'aide ou des suggestions alternatives apprécié.

InformationsquelleAutor JohnC | 2013-10-08

19

Je ne pense pas que le standard HTML, sélectionnez afficher du contenu HTML. Je vous suggère de vérifier Bootstrap sélectionnez: http://silviomoreto.github.io/bootstrap-select/

Il dispose de plusieurs options pour l'affichage des icônes ou d'autres balises HTML dans le sélectionner.
```
<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>
```
Voici une démo: https://www.codeply.com/go/l6ClKGBmLS
- Merci, la première partie répond à ma question, techniquement, c'est une police dans BS3 donc je pense que je vais poursuivre cet aspect des choses pour voir si je peux obtenir un select normales de travail avec elle comme une police. Votre solution n'est techniquement afficher l'icône dans le sélectionner dans la liste déroulante, il n'est pas dans le modification de la partie et j'ai peur que ça ne marchera pas entièrement en charge BS3 puisqu'il semble que le contrôle de pré-dates bs3 et ils ne font aucune mention dans leurs docs à ce sujet.
- Vous êtes les bienvenus. Je n'ai pas vu de mention de BS Bootstrap 3 pour Sélectionner.. j'espère qu'ils vais le mettre à jour.. c'est un excellent plugin
- l'bootply.com semble vers le bas. Est-il possible que je peux remplacer le signe avec mon glyphe icône?
InformationsquelleAutor Zim

J'ai fini par utiliser le bootstrap 3 bouton de la liste déroulante, je poste ma solution ici au cas où ça aide quelqu'un dans le futur. Ajouter le bootstrap 3 liste en ligne pour la classe de l'ul provoque l'affichage dans un bien compact format en tant que bien.

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

Je suis en utilisant Angular.js c'est donc le code que j'ai utilisé:

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

Et dans mon 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;
};

Cela m'a aidé avec l'angle de version. Merci beaucoup. 🙂
De même, cette approche fonctionne avec Ember/Guidon trop.

InformationsquelleAutor JohnC

20

À ma connaissance, la seule façon d'atteindre cet objectif dans un natif sélectionnez serait l'utilisation de l'unicode des représentations de la police. Vous devrez appliquer les glyphicon de la police afin de la sélectionner et en tant que telle ne peut pas mélanger avec d'autres polices. Cependant, glyphicons inclure des caractères réguliers, de sorte que vous pouvez ajouter du texte. Malheureusement réglage de la police des options individuelles ne semble pas être possible.
```
<select class="form-control glyphicon">
    <option value="">&#x2212; &#x2212; &#x2212; Hello</option>
    <option value="glyphicon-list-alt">&#xe032; Text</option>
</select>
```
Voici une liste des icônes avec leur unicode:

http://glyphicons.bootstrapcheatsheets.com/
- Remarque: Cette astuce fonctionne également avec font-awesome glyphicons <select class="form-control fa"><option value="">  demo</option></select>. Au lieu d'utiliser la classe glyphicon, utiliser la classe fa. Vous pouvez obtenir la liste de l'unicode pour les icônes ici: fontawesome.io/triche
- Cela a fonctionné en partie avec BS 3.3.7. Par exemple, ✏ s'affiche mais pas  ou .
- L'application de glyphicon sur le <select> causé le texte illustré de polices différentes. J'ai à la fois, l'icône + police dans <option> tag. Et aucune icône ne s'affiche.
- Si vous y allez avec la police-awsome n'oubliez pas qu'en utilisant simplement la fa classe dans le sélectionner utilisera le standard de la taille de l'icône. si vous préférez une plus grande icône utiliser "fa fa-lg" dans le select de la classe
- Ce doit être la accepté de répondre. Il adéquatement répond à la question sans y compris les bibliothèques ou les plugins. Avoir mon upvote.
- Pas de travail, Donnant invalide modèle d'erreur avec AngulaJS
InformationsquelleAutor Someone
0

Si vous utilisez le glyphicon que le premier caractère de la chaîne, vous pouvez utiliser le code html char (voir https://glyphicons.bootstrapcheatsheets.com/) et d'appliquer ensuite la police pour le premier caractère de l'élément:
```
    option::first-letter{
        font-family: Glyphicons Halflings;
    }
```
InformationsquelleAutor GGTT

Vous devez vous connecter pour publier un commentaire.