Icône en option-Bootstrap + Font-awsome
j'essaie d'intégrer une icône dans une option d'une liste de sélection. En utilisant les 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 obtenir ce dont j'ai besoin? Ou est-ce que je dois utiliser font-awesome et faire un fond CSS manuel pour chaque option?
JSFiddle:http://jsfiddle.net/mmXh2/1/
5 réponses
Vous pouvez utiliser FontAwesome comme une police unicode et insérer vos icônes d'une manière multi-plateforme. Vous avez juste besoin de regarder la valeur unicode pour chaque icône
<select style="font-family: 'FontAwesome', Helvetica;">
<option> Now I show the pretty camera!</option>
</select>
Vous pouvez tricher un peu et de mettre la classe sur l'option:
<option class="icon-camera-retro"> Doesn't work in option!</option>
Apparemment Select2 (http://ivaynberg.github.io/select2/) est une solution pour mettre des icônes dans les options tags. Cependant, peut-être à cause de mon manque de connaissances, Je n'ai pas pu le faire fonctionner. A la fin j'ai eu recours à l'utilisation de 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 existe un inconvénient cependant, l'id de la liste doit être unique. Donc, si comme moi vous aviez 5 listes différentes en une page, vous devez déclarer (?) tout en faisant les codes javascript trapu.
$(function(){
$("#category li a").click(function(){
$(".category").val($(this).text());
});
});
j'Espère que contribuer à éclairer.
Utilisez un plugin comme select2
Voici un travail jsfiddle
<select id="icon_select" style="width: 150px;"><option value="fa-glass">&#xf000; fa-glass</option>
<option value="fa-music">&#xf001; fa-music</option>
</select>
Une solution pour les icônes de travail dans Chrome a été donné sur une question similaire.
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
});