web-dev-qa-db-fra.com

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

Je dois créer un sous-ensemble des glyphicons Bootstrap 3 que l'utilisateur peut sélectionner dans mon interface 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. Toute aide ou suggestion alternative appréciée.

twitter-bootstraptwitter-bootstrap-3html-selectglyphicons
18
JohnC

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

Il dispose de plusieurs options pour afficher des icônes ou d’autres balises HTML dans la sélection.

<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

19
Zim

J'ai fini par utiliser le bouton déroulant bootstrap 3, je publie ici ma solution au cas où cela aiderait quelqu'un à l'avenir. L'ajout de bootstrap 3 list-inline à la classe ul provoque son affichage dans un format bien compact.

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

J'utilise Angular.js, donc c'est 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 contrôleur: 

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

À ma connaissance, le seul moyen de parvenir à cela dans une sélection native serait d’utiliser les représentations unicode de la police. Vous devrez appliquer la police glyphicon à la sélection et, en tant que telle, ne pourrez pas la mélanger avec d'autres polices. Cependant, les glyphiques incluent des caractères normaux, vous pouvez donc ajouter du texte. Malheureusement, définir la police pour 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/

19
Someone

Si vous utilisez le glyphicon comme premier caractère de la chaîne, vous pouvez utiliser le caractère html (voir https://glyphicons.bootstrapcheatsheets.com/ ) puis appliquer la police au premier caractère de l'élément:

    option::first-letter{
        font-family: Glyphicons Halflings;
    }
0
GGTT