web-dev-qa-db-fra.com

Icône en option - Bootstrap + Font-awesome

J'essaie d'intégrer une icône dans une option d'une liste de sélection. À l'aide d'icônes font-awesome, aucune icône n'est affichée.

<select>
    <option><i class="icon-camera-retro"></i> Doesn't work in option!</option>
</select>

Puis-je utiliser font-awesome pour réaliser ce dont j'ai besoin? Ou dois-je abandonner avec font-awesome et créer un arrière-plan CSS manuel pour chaque option?

JSFiddle: http://jsfiddle.net/mmXh2/1/

htmlcsstwitter-bootstrapoptionfont-awesome
18
Monokh

Vous pouvez utiliser FontAwesome comme police unicode et insérer vos icônes de manière multiplateforme. Il vous suffit de rechercher la valeur Unicode pour chaque icône.

<select style="font-family: 'FontAwesome', Helvetica;">
    <option>&#xf083; Now I show the pretty camera!</option>
</select>
19
Sanojian

Vous pouvez tricher un peu et mettre la classe sur l'option:

http://jsfiddle.net/mmXh2/2/

<option class="icon-camera-retro"> Doesn't work in option!</option>
5
Billy Moat

Apparemment, Select2 ( http://ivaynberg.github.io/select2/ ) est une solution pour mettre des icônes dans les balises option. Cependant, peut-être en raison de mon manque de connaissances, je ne pouvais tout simplement pas le faire fonctionner. Finalement, j'ai eu recours à des listes (j'utilisais aussi Bootstrap)

<a class="btn dropdown-toggle category" data-toggle="dropdown" href="#">All Categories <span class="caret pull-right"></span></a>
<ul id="category" class="dropdown-menu">
    <li><a href="#"><i class="icon"></i> Category A</a></li>
    <li><a href="#"><i class="icon"></i> Category B</a></li>
    ..
</ul>

Il y a cependant un inconvénient, l'id de la liste doit être unique. Donc, si comme moi vous aviez 5 listes différentes sur une page, vous devez les déclarer (?) Toutes en javascript, ce qui rend les codes volumineux.

$(function(){
  $("#category li a").click(function(){
    $(".category").val($(this).text());
  });
});

J'espère que cette aide apportera un peu de lumière.

2
Jennift

Une solution pour les icônes travaillant dans Chrome a été donnée sur une question similaire .

Exemple JSFiddle

Code utilisé:

function format(icon) {
    var originalOption = icon.element;
    return '<i class="fa ' + $(originalOption).data('icon') + '"></i> ' + icon.text;
}
$('.wpmse_select2').select2({
    width: "100%",
    formatResult: format
});
0
Jayden Lawson

Utilisez un plugin comme select2

Voici un travail jsfiddle

<select id="icon_select" style="width: 150px;"><option value="fa-glass">&amp;#xf000; fa-glass</option>
  <option value="fa-music">&amp;#xf001; fa-music</option>
</select>
0
Jeremy Lynch